Home
  • About
  • Contact
  • My Calendar
  • Presentations
  • WordPress Consulting
  • Advertising
  • Podcasts
  • Jobs

  • Resolving Browser Display Discrepancies Between IE and Firefox

    July 17th, 2007 | Posted in Web Design, WordPress 16 Comments »

    IE and Firefox browsers have CSS discrepanciesWhen 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

    Featured Information
    People having access to internet are on the move because they can not only take Microsoft exams online but also get Microsoft certification while staying at home. Internet too makes possible running an online business like affiliate marketing or provides access to apply for the affiliation of affiliate programs. People having internet connections can get business web hosting or ask their hosting provider to increase or change their web hosting bandwidth while staying at home. The wireless internet provider has revolutionized these convenient facilities of internet and enabled the people to enjoy these facilities regardless of place and position.

    These icons link to social bookmarking sites where readers can share and discover new web pages.
    • del.icio.us
    • StumbleUpon
    • Facebook
    • LinkedIn
    • TwitThis

    16 Responses to “Resolving Browser Display Discrepancies Between IE and Firefox”

    1. I have tried to change my layout, and unsuccessfully it behaves the same. So the workaround in the mean time is to click on the item menu or use Internet Explorer :( Some people have reported differences between firefox and internet explorer [Resolving Browser Display Discrepancies Between IE and Firefox

    2. So I’m checking out my backlinks…

      Thanks for linking to my site. Glad you found something useful.

      I love your blog.

    3. Rhonda says:

      Another handy extension for checking various aspects in IE is the Web Accessibility Toolbar, available for free from here: http://www.visionaustralia.org.au/info.aspx?page=614

    4. Tom says:

      Thanks for the tip, Rhonda.

    5. Weekly Roundup – Week Ending June 20, 2007…

    6. Steve Thompson says:

      Your article states “The other browsers will read the OTHER stylesheet.” This is not quite so.

      I experimented with two spreadsheets that contained simple styling – different colours for H1 and P elements. To the first (IE)stylesheet, I added another line: BODY { background-color: gray; }

      In the non-IE browser,I saw a grey background! I expected the usual white background.

      What happens is that a non-IE browser cannot under the IF lines so it runs BOTH stylesheets, one after the other.

      To make this feature work, both stylesheets must define each style. For example, if one stylesheet defines the format of an H2, the other one must too.

    7. Ahhh, good point. I’ve always defined the format for the same selectors on each stylesheet, so I’ve never had the non-IE browser pick up any property values for the IE selectors. I think I’ll play with that a bit and update my article with the new results. Thanks.

    8. Core Dump says:

      [...] displays between IE and Firefox  Tom Johnson has put together a good series of tips on matching browser displays between Internet Explorer and Firefox. Although the two browsers are more standards-compliant then in the past, web designers who need to [...]

    9. [...] Resolving Browser Display Discrepancies Between IE and Firefox This is where the site tip comes from – Thanks Tom! [...]

    10. david says:

      very nicely done.
      Thx,
      David

    11. david says:

      very nicely done,
      Thx,
      David

    12. Jim Somchai says:

      Hi David,

      Thanks for the useful post you have here.

      However, I learned by accident that the change in code can not be done since some of the symbols shown on your site has been modified. Here are what I found:

      Old code on header:

      <link rel=”stylesheet” href=”" type=”text/css” media=”screen” />

      Change to

      XXX is the name of the site.
      YYY is the theme you use.

      You may want to edit the code so that it can be useful to others. Anyway, I appreciate the contents on your site.

      Cheers,

      Jim Somchai,

      Jim Somchais last blog post..How To Fix WordPress Blog That Shows Differently on IE and Firefox

    13. Jim Somchai says:

      Sorry, some words are missing. I didn’t know how to edit my comments.

      Change the code to:

      Jim Somchais last blog post..How To Fix WordPress Blog That Shows Differently on IE and Firefox

    14. Jim Somchai says:

      The codes are not show on the comments. This may be why your post on the code is different. Let me get the last short.

      Change to:
      ****
      **************

      *****
      **************

      I hope it works this time. Just take stars out.

      Jim Somchais last blog post..How To Fix WordPress Blog That Shows Differently on IE and Firefox

    15. miguel says:

      Hi

      I am using the JA Purity template that comes with the Joomla 1.5 installation. Any ideas which style sheet needs to be changed and where the extra lines of code must be inserted?

      Thanks
      Migule (Joomla novice)

    16. Joomla is a top notch CMS and this post is a perfect example why. Thank you for this information.

    Leave a Reply

    « »