Re: [WSG] best method for columns inside a column

2004-03-30 Thread Chuck
On Monday, March 29, 2004, at 11:57  PM, Miles Tillinger wrote:

Finally a chance for my first attempt at a 100% CSS positioning site 
and besides using the deprecated align parameter for an input:image, 
the site validates ok!

http://streetdaddy.gotdns.com/astute/index.html
http://streetdaddy.gotdns.com/astute/main.css
http://streetdaddy.gotdns.com/astute/astute.css
(sorry if the dyndns is borked, try 150.101.34.189 temporarily if it 
is)

Its a simple header  two-columns  footer layout based on a 
layout-o-matic template.  I then use absolute positioning to float the 
#feature div to the right of the #services div, however the correct 
top  left values seem to differ between IE and Mozilla/Opera.

I've managed to get it basically perfect in IE6, but there is small 
2-3 pixel discrepancy in Mozilla and Opera (haven't had a chance to 
check on Safari yet *shudder*) down the left side of the right column. 
 I'm guessing that its to do with how I've made the columns inside a 
column layout, but I can't work out a better way to do it.
Good looking page!
Mac side looks good; Safari, IE5.0,  Mozzilla (ex: Opera 6.0 -no 
@import, so no text)
As far as the IE hacks go, ...go to the web site of Dean Edwards and I 
think your find the best solution. http://dean.edwards.name/IE7/intro/
His script [ie7-xml.css] changes IE to a standards browser.
Copy it from the src link in the breadcrump tail. -chuck




Is what I am trying to do not suited to CSS positioning?  Or is there 
a better way to do it?

Cheers,

MT
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
*

*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
* 



RE: [WSG] best method for columns inside a column

2004-03-30 Thread Miles Tillinger
 On Tuesday, March 30, 2004, at 03:57  PM, Miles Tillinger wrote:
 
  I've managed to get it basically perfect in IE6, but there is small 
  2-3 pixel discrepancy in Mozilla and Opera (haven't had a chance to 
  check on Safari yet *shudder*) down the left side of the 
 right column. 
   I'm guessing that its to do with how I've made the columns 
 inside a 
  column layout, but I can't work out a better way to do it.
 
 You're worried about 2-3 pixels?  I wouldn't be, unless it 
 looks awful, 
 just aim for close and visually balanced rather than pixel 
 perfect.

I agree and I'm happy with where it's at now.  It definitely doesn't look awful, in 
fact a few ppl that've seen the site didn't notice it, although they aren't hunting 
for it like we would!

 
 Furthermore, I'd suggest that Safari, Mozilla, Opera et al are 
 correct and IE is 2-3 pixels out, not the other way around :)

Yeah it's certainly IE that is being silly as I've measured the pixels.

 
 FWIW, it renders the same in Safari and Opera 7.5Beta on Mac OS X.

Thanks for the OSX check, that makes me feel better!
 
 
  Is what I am trying to do not suited to CSS positioning?  
 Or is there 
  a better way to do it?
 
 Seems perfect to me -- you should be able to almost achieve 
 everything 
 (and then some) with CSS layout that you used to with tables, 
 with the 
 exception of tabular data, which should remain in tables.

MT.

 
 ---
 Justin French
 http://indent.com.au
 
 *
 The discussion list for http://webstandardsgroup.org/
 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
 * 
 
 
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
*



RE: [WSG] best method for columns inside a column

2004-03-30 Thread Miles Tillinger
 
 Sorry no answer to the problem... But your services div has a margin
 left of 197 and your splitter one has a margin left of 200. 
 The splitter
 seems to be pushing out as well in ie5.0, im not sure why that is.
 Probably the width of the feature or services div becomes 
 smaller in ie5
 and so its out of whack. 

That was the smoking ears problem I had, trying to make small changes to pixel values 
to get it to line up in different browsers.  I will take a look at the IE5 issue.

 
 Also with regards to your box model hacks, if you haven't 
 used a left or
 right padding/margin, ie5 and 6 should read the width as the same non?
 So no need to use the hack? Or does ie5 put some stupid 2 
 pixel space in
 for some reason?

I think the hacks were in there from the layout-o-matic template.  I'm yet to try 
removing them.

 
 How come you decided to use float and abosolute positioning? I would
 have thought to only use one or the other, not together. It is sitting
 within the main div already so would float: right take care of the
 positioning using a specific margin and width? Or does it break the
 layout?

When I first tried that method it worked ok but removing the float right broke the 
layout.  However it changed a fair bit after that so working backwards a bit may help 
solve the problem.

 
 Site looks awesome btw, shadows are nicely done imo.

Thanks for the suggestions, I'll try them out :)

MT.

 
 
 Tim Hill
 Computer Associates
 Graphic Artist
 tel: +612 9937 0792
 fax: +612 9937 0546
 [EMAIL PROTECTED]
  
 
 -Original Message-
 From: [EMAIL PROTECTED] 
 [mailto:[EMAIL PROTECTED] On
 Behalf Of Miles Tillinger
 Sent: Tuesday, 30 March 2004 3:57 PM
 To: Web Standards Group (E-mail)
 Subject: [WSG] best method for columns inside a column
 
 Finally a chance for my first attempt at a 100% CSS 
 positioning site and
 besides using the deprecated align parameter for an input:image, the
 site validates ok!
 
 http://streetdaddy.gotdns.com/astute/index.html
 http://streetdaddy.gotdns.com/astute/main.css
 http://streetdaddy.gotdns.com/astute/astute.css
 
 (sorry if the dyndns is borked, try 150.101.34.189 
 temporarily if it is)
 
 Its a simple header  two-columns  footer layout based on a
 layout-o-matic template.  I then use absolute positioning to float the
 #feature div to the right of the #services div, however the 
 correct top
  left values seem to differ between IE and Mozilla/Opera.
 
 I've managed to get it basically perfect in IE6, but there is 
 small 2-3
 pixel discrepancy in Mozilla and Opera (haven't had a chance 
 to check on
 Safari yet *shudder*) down the left side of the right column.  I'm
 guessing that its to do with how I've made the columns inside a column
 layout, but I can't work out a better way to do it.
 
 Is what I am trying to do not suited to CSS positioning?  Or 
 is there a
 better way to do it?
 
 Cheers,
 
 MT
 *
 The discussion list for http://webstandardsgroup.org/ See
 http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
 * 
 
 
 *
 The discussion list for http://webstandardsgroup.org/
 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
 * 
 
 
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
*