My site, built on wordpress, is coded XHTML 1.0 strict and CSS3. It validates except for script tags not CDATA enclosed, and unclosed < br > tags, and those found in jquery-ui.css
The site is live on a domain http://www.example.com while the development site is live on www-dev.exampledev.net Both installs have the same code.
On IE8 on Win7 both sites render the same for both www and www-dev sites..
While IE8 on Vista the www-dev site renders correctly, but the www site has a problem with the placement of the major page navigation – there’s a gap that shouldn’t exist.
I don’t have access to an IE8 Vista box, so I can’t easily look at the code using the IE equivalent of FF’s webmaster tools
Any suggestions on how to deal with it? I’m wondering if it’s not the same issue as this one:
My guess would be that one of your copies of IE8 has is falling into IE7-Compatibility mode.
The symptoms you’ve described are typical of this — the same site with the same code behaving differently in different copies of IE8, or when hosted in different locations.
IE8 (and IE9 come to that) have an annoying little feature which can cause it to drop into compatibility mode without telling you, and only for some sites.
The way to find out if this is what is happening is to open the developer tools window (press F12). The rendering mode is displayed at the top of this window, to the right.
Try this in all the combinations you’ve tested in, and my guess is that you’ll find at least one of them reporting that it’s in IE7-compatibility mode.
So why does IE do this? There’s a configuration setting, which tells IE8 to use compatibility mode “for intranet sites”. That is, sites on the local network. The idea behind this is that corporate users may have intranet applications which were designed for earlier versions of IE and can’t be upgraded. It allows them to upgrade IE while still using those applications internally. It would have been a great idea but for two mistakes: Firstly, all those corporates were stuck on IE6, and the compatibility mode is only for IE7. And secondly, the compatibility mode is not 100% identical to a real IE7 anyway; it has bugs and quirks of its own. So a bit of an own goal then. But it’s there, and you need to know about it.
So how do we get around it? The first answer is to switch the config setting off. Sadly, for most of us, we can’t dictate this to your users, so the full solution is to use a meta tag which Microsoft invented specifically to help developers get around this problem. Add the following to your HTML header, and the problem should go away:
Hope that helps.