IE Stylesheets for WordPress CSS

Posted by

If you create your own WordPress theme or modify an existing theme dramatically, you may find yourself in a situation where your WordPress blog doesn’t look good in IE. If you have a blog dedicated to Mac users, maybe you don’t care, but those pesky IE users are hard to ignore for most of us. The solution is you need to create some custom styles and put them in a conditional IE stylesheet for WordPress. This really isn’t different than creating an alternate IE stylesheet for any other type of web platform, but there are some minor things to look out for on implementation.
Once you create the styles that work in IE, you need to implement them on your blog. Keep in mind that you want the IE stylesheet for your WordPress blog to come after the normal stylesheet on the page, otherwise IE will overwrite your corrected styles with the original CSS styles that don’t work. Also, you need to reference your IE stylesheet with the correct WordPress PHP code so that it will display properly.
Below is an example of how you need to implement the IE stylesheet correctly using WordPress template code.

<link rel="stylesheet" href="<?php bloginfo('template_url');?>/styles.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/ie7.css" type="text/css" />
<![endif]-->
Advertisements