Internet Explorer CSS/Refresh Oddity

[jeremycellis]

First off, hello. I'm new to this forum, but I was looking for a really good forum to ask this question in, and I hope I've found it. And now, the question:

• • • • •

Well, I'm sure it is no surprise that I'm having trouble with my CSS looking proper in Internet Explorer. But, here are the details:

I'm working on a really simple site for a client and have put together a few design samples. Before sending them over I checked that they looked right in the latest versions of IE, Safari, Firefox, Opera, Netscape, and Camino for both OSX and Windows. Of course they all looked identical except for IE. I fixed the IE problems (using a second stylesheet that is used in place of the normal stylesheet if PHP discovers that the browser is IE) by not centering the site and using floats instead of position commands.

All is well.

Except one of the board members for the client isn't using IE7, she's using IE5, which I hadn't tested it on. When I started testing it on IE5 (using Windows 98) the site does look bad. This is fine on it's own and I could just use tables to lay out the site for IE5, but then I noticed something. The site actually *does* layout correctly, for a brief moment, and then it jumps to the incorrect setting. Even stranger, the second time you view the site (at least in my experience) it does look perfect (or at least it looks like the IE fix that I set up for IE7), but when you refresh, it starts doing the jump effect again. And it never ever again stays in the correct layout.

So, because IE does render it correctly (before jumping out of place) I'm not ready to just give up and lay the site out with tables. It seems that something (probably small) is causing IE to re-render the site after rendering it correctly. I've spent the last day or two scouring the web for a fix and didn't find anything that worked.

I am hoping that the experts gathered here can either show me what's wrong or point me to another forum that might be able to help.

Here's the site (there are 3 samples):

http://www.wonkdevelopment.com/wip/madp/index1.php
http://www.wonkdevelopment.com/wip/madp/index2.php
http://www.wonkdevelopment.com/wip/madp/index3.php

Here are the stylesheet direct links:

http://www.wonkdevelopment.com/wip/m.../styles1ie.css
http://www.wonkdevelopment.com/wip/m.../styles2ie.css
http://www.wonkdevelopment.com/wip/m.../styles3ie.css

Also, as a side note, I have validated my coding (and stylesheets) with the W3C validation service and everything checks out clean.

Thanks for any help, I'm totally stuck in a rut with this one.

Cheers,
-JCE

[Leprakawn]

IE6, 800x600 the layout gets messed up. I know 800x600 is a rarity these days, but if someone still has IE5, then 800x600 will definitely be used.

PS: It would be funny if their logo was a broken syringe or a broken scaffold.

[jeremycellis]

So, I want to make sure I understand what you said. It is because it is smaller or larger than 800x600? For sample 1 & 2 it is meant to be within 800. For sample 3 it is meant to be within 1024x768.

I'm sorry, but I don't follow what you said. Thanks for clearing this up. I appreciate it!

Cheers,
-JCE

[curtiss]

The problem you are having is simply a matter of IE adding widths differently than the other browsers. The reason it looks right for a moment, but then goes all wacky on you is because it is correct until the scrollbar appears on the right side of the browser. That scroll bar shrinks the width of the viewport just enough to push everything out of place.

Subtract a few pixels from the width of each item for your IE 5 style sheet.

BTW - Stop using PHP to try to sniff browsers. Use the built in capabilities of IE to do that for you. The advantage of doing it that way is, you can still use your standard stylesheet for everything, you only have to "fix" the "broken" rules in your additional stylesheets.

[Leprakawn]

No, no... 800x600 resolution. Samples one and two did not work in IE6; look at the atch.