CSS issues in IE8 XP but not in IE8 Vista or 7

Question

I've implemented a landing page design for a campaign we are launching at work, and did testing on IE 7 on my XP machine at work and IE 8 on my 7 machine at home. These both worked and so I thought I had beaten IE, but as it turns out, different OS's IE render HTML differently even though they claim to be the same browser.

Anyone who has XP and IE8 will not see the site correctly at all.

I use two different CSS links. One for IE and one for !IE:

<!--[if IE]>
<link href="../images/content/pagebuilder/idop_2010/free-to-believe-IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if !IE]><!-->
<link href="../images/content/pagebuilder/idop_2010/free-to-believe.css" rel="stylesheet" type="text/css" />
 <!--<![endif]-->

I had to use !IE because IE was still pulling CSS from the good stylesheet, and the IE sheet wouldn't update correctly (a different issue).

If I create IE specific CSS (IE7/IE8 vs just IE) could that fix the problem?

What's a good way to overcome an issue of Operating Systems + IE?

---

Edit

I installed IE 8 on my work computer and it has the same problem as all the other IE 8 computers. I have Internet Explorer developer tools, and I noticed that IE was running in "IE8 Standards Mode" When I switched it to "IE7 Standards Mode" the layout worked perfectly. I also noticed on my laptop with Windows 7, that the compatibility mode icon was activated. When I turned it off, I was able to duplicate my problem. So now I know for sure it's an IE8 issue in general, not necessarily an OS issue.

I've now created an IE8 specific stylesheet which I'm going to start overhauling to get it looking right.

Here is the site: http://members.opendoorsusa.org/site/PageServer?pagename=IDOP_2010

Anyone who wants to take a look at it and give me suggestions as far as CSS is concerned, I would appreciate it (I didn't do the design, just implementation, so no design critiques please)

Now that I know that this is the problem, I have another question. Why in the world does IE 8 display so different than IE7?!

Answer 1

The best way to overcome IE issues is to use conditional comments:

<!--[if IE 8]>
... link IE 8 specific stylesheet...
<![endif]-->

It seems like you already know about the conditionals so just try an IE8 specific stylesheet and see if it works.

Check this out. In theory, there shouldn't be any differences between different versions of Windows and the same web page on IE 8, but there may be exceptions with ActiveX and possibly the rendering of fonts.

Let me know if an IE8 specific stylesheet works for you.

Answer 2

Did you use the JQuery UI Themeroller ? I just discovered a css bug as well that was only in XP, not in Vista. UI tabs and accordions were missing header text. I isolated the issue down to a custom generated theme made by the Jquery UI Themeroller. Replacing the custom theme with a prebuilt theme fixed the problem.