How do I debug a WordPress theme for IE9?

2
votes

My WordPress blog (www.itauthor.com) displays just fine in IE7, IE8, Chrome and Firefox. However, it doesn't display at all in IE9, even if I F12 and change the display modes. Disabling all active WordPress plugins doesn't solve the problem but switching to another theme does - so there's something in my theme that IE9 doesn't like.

However, I really like the theme I'm using, I've been using it for years and I really don't want to have to switch themes (and be faced with hours & hours of PHP tweaking) just because of IE9.

So what's the best way of tracking down what's causing IE9 to blank my site?

4
phpwordpresswordpress-theminginternet-explorer-9

4 Answers

3
votes

Try passing your site through a validator to see potential problems.

http://validator.w3.org/

There are quite a few issues, it would be best to make sure that your markup matches your doctype. You should also remove any white spaces before the doctype declaration (there are 3 blank lines)

As your doctype is XHTML, you have to close your tags properly. The three css link tags on top is not closed, change them to:

    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/blueprint-wp.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.itauthor.com/wp-content/themes/blueprint/print.css" type="text/css" media="print" />

You're also closing some paragraph tags where they're not open. Just work your way through the issues on the validator page.

Despite all problems, I have a fresh installation of IE9 with default settings, and your page renders just fine. If you have any IE add-ons installed, make sure you run IE9 without addons using the shortcut in the start menu and test again.

0
votes

You may try:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

as a workaround until the problem is solved.

0
votes

Problem solved:

I eventually discovered the answer to blank pages in IE9 - or pages not displayed correctly for some sites. It's a known bug in IE9. It doesn't like Helvetica. This bug only manifests itself if you actually have Helvetica installed which is why most people don't encounter the problem, but if you do have Helvetica installed and you browse to a site like validator.w3.org that (at the time of writing) uses this font, then part or all of the page won't show up in IE9.

The solution for visiting other people's sites (a drastic one) is to uninstall Helvetica on your computer, then IE9 will just use the next installed font listed in the page's CSS.

If you're a web site owner and you want to fix your site for other people, the solution is to remove Helvetica from your site's stylesheets.

I find it amazing that months after this bug has been known about Microsoft still haven't got round to fixing it.

0
votes
<!--[if (gt IE 9)|!(IE)]><!-->   
    <script src="http://livedemo00.template-help.com/wordpress_45311/wp-content/themes/CherryFramework/js/jquery.mobile.customized.min.js" type="text/javascript">    </script>    
    <script type="text/javascript">    
        jQuery(function(){    
            jQuery('.sf-menu').mobileMenu({defaultText: "Navigate to..."});    
        });    
    </script>    
    <!--<![endif]-->