Stupid IE6.
Ok, so here I was thinking I was done with my website redesign. Unfortunately I didn’t preview it in a bunch of browsers. Safari in OS X is my browser of choice. I guess I’m at fault for using an extremely standards-based browser. My website looked great in Safari.
There were a couple little glitches in black areas of the header and footer under Firefox and IE5 for Mac but they were easily fixed by adjusting the border setting in those areas. I think Firefox looks almost as good as Safari–though their forms display needs a little help. I’ll have to look into tweaking that.
Internet Explorer 5 for Mac looked worse of all but hey, what do you want from a browser that hasn’t been updated in years?
Imagine my shock when I fired up Windows 98 in Virtual PC “just to be sure” and my website looked like a disaster.
It seems that wonderful Internet Explorer 6 has a wonderful “feature” that floating elements like my nav bar don’t behave as expected.
After a lot of research and “trial and error”, I was able to fix the problem. My XHTML code is pretty simple: There’s a container <div> which is everything that is not the grey background. Inside of that there’s a header <div>, a navigation <div>, a content <div>, and a footer <div>. Obviously there’s more going on than just that but those are the basic elements. In my CSS, I floated the #navigation to the right, set the #content exactly next to it (to the pixel), and told the #footer to clear both.
Ultimately I discovered that IE6 can’t handle the #content touching the floating #navigation. I had to leave 8 pixels between the two. I’m sure it could be a little less but 3 pixels had the same problem and I got sick of playing with it so I left it at 8.
I am SO glad that the web browser that something like 70% of the world is using doesn’t actually properly support standards. Ugh!
Anyway it’s now working. I would however appreciate it if anyone who happens to actually read this site who is using some other operating system / browser combination, would be kind enough to send me a screen capture from their system. Or at least drop me a note in my email or in the comments letting me know how it’s working. Thanks.
Stupid IE6.