Category Archives: Wordpress Issues

WordPress 2012 Theme Issues with IE8

Unfortunately when developing a responsive theme with WordPress for the real world you have to consider compatibility issues with IE8.  Most of the standard stuff such as rounded corners, drop shadows and the like degrade gracefully.  OK the user won’t have the experience that browsers get when using a HTML5 compatible browser but at least the site will still function as before.

IE8 and previous versions are the odd browser out, the age old padding issues are still there and lots more funky things happen as compared to updated standards based browsers.

Anyway, enough of the woes.  Generally, when developing a responsive WordPress site it’s a good idea to start with an existing theme.  Personally, I think the 2012 theme is a great place to start as it covers most of the bases and will be part of the wordpress platform for the next few years at least and thus will be supported and patched as necessary.

When developing a theme generally the items that are styled are heading, footer, background, page, posts, widgets and so on.  Of course the other item that is commonly styled is the menu or nav bar.

If you are new to the wordpress 2012 theme and you do all your styling within style.css you’ll have no problems updating the nav style with background colours, textures, colouring links and their hover equivalents and it will all render perfectly until you or your client opens the site in IE8 or previous.

If you’re like me and have the latest version of IE you can see how your site will look on IE8 and previous versions by hitting F12. Once the developer tools window opens you can select the browser mode and set it to IE8.

After putting effort into styling a menu, you will notice in IE8 and below that the menu style looks like the default menu style.  This is becuase a separated style sheet is loaded up on versions previous to IE9. This stylesheet is located under css/ie.css.

Unfortunately you need to style up the menu again within this file using the changes you made to the menu styles under style.css in the root folder.