Re: [WSG] best method for columns inside a column
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
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
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 *
