views:

227

answers:

1

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?!

+2  A: 

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.

Hristo
Using an IE8-specific stylesheet will also make the page forward-compatible, so that future versions of IE can render it without needing all the IE8 and lower styles.
derekerdmann
@derekerdmann... so you agree with me?
Hristo
@Hristo Yep. Just wanted to throw in a little more info that I didn't think was worth a whole answer.
derekerdmann
Ian
... b/c Microsoft likes to do things differently? :)
Hristo
@Ian It's because they actually made the rendering engine a little better... which broke all the old fixes. Tragic results of progress.
derekerdmann
@derekerdman Thanks again for the info. The compatibility mode tricked me into thinking my page builds looked correct.
Ian