Hi. I have just begun using CSS instead of tables. I was kind of impressed when I got my simple layout working in Firebird and Camino on mac OS X, but when I checked it in IE it was so awful it was nearly unusable (The side menu was along the top!) and in IE Windows it looked crappy (lots of white space and things not lining up right!). The page validated for CSS. I looked at some pages which talked about CSS hacks, but I'm still just not sure why the page is so different in the different browsers or how to fix it... It seemed so simple :? Any help would be appreciated.
The page is at http://cortland.fatratdesign.com/reslife/
and the CSS is at http://cortland.fatratdesign.com/reslife/reslife.css
eek, layout problems in IE with a simple design!
Your biggest problem is that IE fails to follow the standards!
I believe they keep it that way deliberately so css newbies
like you will get the impression that IE "works" and all the
Specifically it's the IE float model that is messing you up.
See these items for details on it:
I would suggest you remove the "heights" from the red
and yellow divs. Use padding or margins on divs nested
within those divs for control.
Sorry to have to tell you this, but M$ forces many many
compromises like this. Better get used to it, because they
show no signs of changing their ways any time soon. Why
should they? If they cleaned up their act their browser would
work just like the competition, but without supporting all the
cool new features those guys already do. Better that M$ should
pretend to be on the cutting edge and rely on public ignorance.