Internet Explorer 7 and !important


Internet Explorer versions 6 and below didn’t not parse the !important css modifier correctly - this allowed you to specify styles for browsers like Firefox and such, using the following syntax:

identifier {
  background: #000 !important; /* Firefox */
  background: #FF0000; /* IE */
}

The element’s background will be set to red because the red declaration is after the black declaration, and IE ignores !important identifiers - Firefox on the other hand observes the identifier correctly, and will use the higher priority black background.

This is (I mean was) a pretty cool solution that I have used to good affect on several websites. Unfortunately Internet Explorer 7 shipped with support for the identifier, but didn’t really fix much else in the way of CSS bugs. So we now have a browser that will correctly use the higher priority declarations, but these declarations still break layout. Sigh.

This took me a couple of minutes to figure out why my site was going insane, luckily the fix is pretty quick:

Remove the !important keywords from your CSS file, and then delete the IE related declarations.

identifier {
  background: #000;
}

In your main template/HTML file, under your external css declaration, put the following:

<!--[if IE]>
<style type="text/css">
identifier {
  background: #FF0000;
}
</style>
<![endif]-->

This uses IE’s conditional comments to apply the appropriate styles - other browsers treat it as a comment and ignore it.

Share this post
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
  • Facebook
  • muti
  • Mixx
  • Google
  • laaik.it

This entry was posted on Monday, December 18th, 2006 at 5:49 pm and is filed under Hacks, Internet Explorer. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Internet Explorer 7 and !important”

  1. NightCrawler03X said this on

    p.fun {color:#990000;}
    body[id=variable] p.fun {color:#fedaeb;}

    This is another solution for getting one style in IE 5.x/6.x, and one that other browsers will get.

    IE 5.x/6.x do not support “body[id=variable]“, so they will ignore rules on it. Thus, IE 5.x/6.x will get a color of “#990000″, and firefox (as an example) will get “#fedaeb”.

    This is a great advantage to web designers because it means that you can use absolutely bleeding-edge techniques that you know will work on all other browsers, but you can override these rules (only for IE) so that IE doesn’t get a messed up display.

    Firefox will see “body [id=variable] p {}” and override “p {}”, while IE will only see “p {}”.

    The neat thing about this is that it won’t mess up IE7 because it will do the same thing as firefox/opera/etc, that is, override “p {}”.

    The downside is, yeah, you still have to be careful with the limitations of IE7. If someone would find another parsing bug for IE7, one that can be exploited like the one you mentioned, that would be great.

  2. phone jammer said this on

    Love the blog, keep up the good work.

  3. Marlon said this on

    Internet Explorer 8 is really good. This browser is very very stable and i have been using it for quite a while without blue screens or crashes.

  4. Lukas said this on
  5. Antione Glasby said this on

    Sick and tired of getting low amounts of useless traffic for your site? Well i wish to inform you of a new underground tactic that makes me personally $900 on a daily basis on 100% AUTOPILOT. I could be here all day and going into detail but why dont you merely check their site out? There is a excellent video that explains everything. So if your serious about making easy cash this is the website for you. Auto Traffic Avalanche

  6. TOMS said this on

    I was reffered to this site by on of my readers and they were correct. Great Find!

  7. Gonzalo Petricka said this on

    I really wanted to develop a quick message to be able to thank you for these pleasant solutions you are writing here. My time consuming internet look up has at the end of the day been paid with sensible strategies to go over with my companions. I would tell you that we website visitors actually are quite endowed to live in a fantastic site with so many wonderful people with insightful tricks. I feel truly lucky to have discovered your entire website page and look forward to tons of more pleasurable moments reading here. Thanks a lot again for all the details.

  8. insanity vs p90x said this on

    Hi there, I must say that Web Expose » Blog Archive » Internet Explorer 7 and !important is often a quite great place to slack from work :) I really love your weblog and I’ve currently bookmarked it. Please, keep it updated a lot more frequently. Thanks!

  9. Dung Cothern said this on

    It genuinely is such a exceptional useful resource that you merely are giving and you give it aside for free of charge. I found it on Bing

  10. Bobbye Agpaoa said this on

    It? s the first time I’ve heard that in Macedonia, obits are an unusual observe. You might have wonderfully written the publish. I’ve liked your way of writing this. Thanks for sharing this.

  11. Elana Casamayor said this on

    This is definitely a good and insightful post. Though I am experiencing difficulty getting your web site to show up the right way with this safari browser, any suggestion what could possibly be wrong??

  12. Renata Dirienzo said this on

    Keep all the blog posts coming. I like checking out this site. Cheers.

  13. Kerrie Levo said this on

    Congratulations for posting such a useful blog Your blog isnt only informative but also extremely artistic too There usually are extremely couple of individuals who can write not so easy articles that creatively Keep up the good writing

  14. Edible Arrangements Coupons said this on

    Nice post……

    [...]that is the end of this article. Here you’ll find some sites we think you’ll appreciate, simply click the links over[...]……

Leave a Reply