Is something simple making my page look horrible in ie6?

HTML & CSS
1

I could be wrong, but I thought that at one point in the design process my site looked pretty normal in IE6 except for the transparent png grey matte. now, however… not so much! I have the transparency issue somewhat addressed thanks to 8bit pngs… BUT holy crap it looks ridiculous in IE6 now. i was laughing for a while… but since i know it was working before, can anyone see if there’s something straightforward causing the problem?
i don’t care about it being identical… just want to make sure it’s functional…

ohh urrr… it also looks like it’s totally mucked in IE8 as well, and i KNOW that did not used to be the case.

i think it may be due to changing some values in the #menu which may have been imprudent. i was trying to put things in ems so it could scale up elegantly with text size+ing, but that may have backfired.

THANKS!!

2

It is not your css causing this. :slight_smile:

It is the comment before the doctype that is throwing all IE into quirks mode.

[COLOR="Red"]<!--config.php-->[/COLOR]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3

Ah! It was something simple! I’d just left that in from testing for php inclusions and forgot about it. That is also great because I’d worried a bit that the site had looked horrible in IE for a long while without me knowing (that change just happened yesterday, so, not so bad)

thanks so much for finding that!

Now it is still looking a bit wrong in IE6, with the menu, and some z-index/height issues as well… I’ll have to see if I can determine the problem… it’s just such a pain testing in IE6 without being able to use firebug hehe.

4

Hi, the problem is is that the nested <ul> is 100% wide and as a result IE6 is incorrectly expanding the <li> to fit.

A simple solution would be to just set the width of the <li> :slight_smile:


#menu li ul{width:5.8em;margin:0;}

The height issues are…?

5

thanks! the height issue was that the header div is not lining up properly in ie 6… it has a bunch of padding so you can see the background behind it

6

HI, the problem is is that IE6 doesn’t suppoort position:fixed.

It reverts back to position:static and thus the header height is increased.

You can use an expression to simulate position:fixed for IE6 :slight_smile:
http://www.visibilityinherit.com/code/ie6-position-fixed.php

7

that looks like a good work around… i’ve never used expressions like that before. my left is 50% is that going to work still?

8

I don’t know expressions that well but I don’t see any reason why not :). Go test!