Resolving Browser Display Discrepancies Between IE and Firefox

by Tom Johnson on Jul 17, 2007
categories: technical-writing • web-design • wordpress

When you begin modifying your blog's stylesheet or designing your own blog, you may notice that some elements display differently in Internet Explorer (IE) than they do in Firefox. IE is usually the problematic browser, and it's hard to say why there are so many CSS display quirks and bugs from Microsoft. But there is a quick, easy fix around the troubling display discrepancies.

In short, you create two stylesheets, one for IE and one for Firefox and other browsers. You then add a piece of code in your header that tells to the IE browser to read the IE style sheet. The other browsers will read the other stylesheet.

To create separate stylesheets for the different browsers:

1. Duplicate your current stylesheet and change the name to something like ie7.css.

2. In your header file, locate the current call to your stylesheet. It should look something like this:
<style type="text/css" media="screen"> @import
url( <?php bloginfo('stylesheet_url'); ?> );
</style>
Delete this call to your style sheet.

3. In the place where you deleted the style sheet call, add this code instead:
<![if IE]><link rel="stylesheet" type="text/css"
href="http://blog.com/wp-content/themes/simpla/ie7.css">
<![endif]>

<![if !IE]><link rel="stylesheet" type="text/css"
href="http://blog.com/wp-content/themes/simpla/style.css">
<![endif]>
4. Customize the paths to your style sheets. The first code snippet says, if the browser is IE, use the ie7.css stylesheet. The second code snippet says, if the browser is not IE, use the style.css stylesheet.

With this method, you have two style sheets to maintain, so keep this in mind when making updates. However, you'll be able to easily adjust the styles for the troublesome IE browser.

Additional Resources

• Creating Separate Stylesheets for Internet Explorer and Firefox. This site is where this tip comes from -- thanks Kristen.
• Browser Specific Style for your WordPress Site. This article outlines a slightly different method that didn't work for me, but it was still worthwhile.
• Firefox Web Developer Extension. The most useful CSS tool for adjusting your CSS.
• Internet Explorer Developer Toolbar. IE's equivalent to the Firefox Developer extension. It's not as user friendly and doesn't work in exactly the same way, but it can also be useful.