Any CSS geeks here?

[Macette]

Howdy,

I'm having probs with a CSS layout... and because the problem is happening with IE 5 (Mac OS X), I thought other coders out there might have come across it and be able to help?

It looks great in Safari (well, I think it does... at least, it works!), but in IE it's all, well, weird. You can see what I mean by going to:

http://quarterly.udf.org.au/

Any clues? I'm only just getting into CSS layout, and so I don't know the hacks for getting these fluid layouts to work.

Thanks :)

[robbieduncan]

It's very broken in Mozilla Firebird in Windows (can post a screenie if you want). Mozilla's rendering tends to be totally to the standards so I would take a look at your code if I were you.

[Macette]

yes, i know i have to look at my code... my question is, what bits? I mean, it's valid XHTML (not that that means it should LOOK right)... and it looks great in Safari. I guess I'm wondering if somebody can give me some actual TIPS... cos I'm struggling to find info about this.

[Rower_CPU]

First off, check out the CSS validation:
http://jigsaw.w3.org/css-validator/validator-uri.html

You've got 3 errors to address first, then we can look at what's happening. I'm seeing a funky layout in Safari, too.

Here's a quick tip as we get started troubleshooting: put a 1px red border around your sections (top, left, middle, right) and any sub sections to see where the overlaps are coming and how everything is being spaced.

[Macette]

thanks, that's a useful tip. i validated the css yesterday, but then i got into the whole box model hack thing, and starting messing things up.

i might check back here for some more help soon!

[Rower_CPU]

Please do. I do a fair amount of CSS work and am always keen to work on new projects/problems. :)

[Macette]

ohmygod, you know what one of my problems is? Safari has been caching my old style sheet, and so i've been going along thinking all's sort of well. when i cleared my cache, i saw what you guys have been seeing.... bleeeccchhhh.. SORRY! I'm kinda wasting your time with this stuff!

I'll go back to one of my older versions and work from there again.

[Macette]

okay, now it's up again, and seems to be working in Safari properly, but this IE Mac prob keeps happening.

http://quarterly.udf.org.au/

the css validates (except for one little thing, which i know is not the cause of the problem).

has somebody got experience with box models, who could possibly point me in the direction of a fix?

[mod. edit - Fixed the link]

[Rower_CPU]

Sorry it's taken me so long to get back to you.

I'm just starting to go through your CSS, but something jumped out at me. Why do you have an empty stylesheet (style1.css) in your link tag?

Is that an oops or something else?

[Rower_CPU]

OK, it looks like IE5 is applying the #middle margin to the #right div for some reason, so I dug around and found this way to hide CSS from everything but IE5 Mac:

http://www.premonition.co.uk/cssd/ie51-only.html

Take a look at what I came up with:
http://organicallydigital.com/UDF/

There's probably a more elegant way, but that's all I could come up with for now.

[Macette]

thanks rower - i'll have a look at that today. being on opposite sides of the world, i understand the delay in our discussion!

the empty style sheet is to fix another bug (the whole layout is based on one of thenoodleincident.com's Little Boxes, and when i was getting desperate yesterday, i got the code and rebuilt all the css from scratch - to no avail. I'm wondering if it's to do with the way I've ordered the divs - I'll look at that next, when i look at your solution.

[Macette]

hi rower (and evrybody!)

i couldn't get that to load in IE at all - it worked fine in Safari, but not IE. Weird...

Also, I just checked on a friend's Window's machine (I know, I know, I shouldn't be friends with people like that.. :D ) and my original version (I didn't try your version) didn't work properly in IE6 either - so it's probably not an IEMac specific bug. I'll keep hunting...

[Rower_CPU]

D'oh! I feel so bad I missed this one earlier.

You've got a width set for your form element at 350px, which pushes out the right column in some browsers.

Fix that and you're golden. :D