CSS for IE 7 only

The new IE 7 is a huge step in the right direction for Microsoft, but it’s still lacking in some areas.

There are still some significant differences in the way IE 7 and other browsers like Firefox and Safari handle some CSS. But there is a some what simple way around this, Microsoft recognizes it’s short comings and has built in something called Conditional Comments that are kind of like regular HTML comments.

You’ll need to create a CSS file for any IE 7 only commands and then use these conditional comments to send this CSS file only to IE 7. To do this, place the following code into the header of each HTML file, after the link for the main CSS file.

  1. <!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

The only CSS you need to place into this extra file are those which will override commands in the main CSS file. You don’t need to duplicate commands across the two CSS files as IE7 will also read through the main CSS file.

And remember that conditional comments can only be placed inside HTML files and not CSS files.

This entry was posted on Monday, March 12th, 2007 at 7:47 am and is filed under CSS. 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.

« Uninstalling programs on OS X
PHP 5 Error with array_merge() »
 

3 Responses to “CSS for IE 7 only”

  1. Terry Says:
    March 26th, 2007 at 2:44 pm

    Thanks for the conditional CSS file idea. It worked!

  2. Michael Says:
    March 30th, 2007 at 8:04 am

    Hi Terry,

    Glad it worked for you, I just wish Microsoft would get on the ball already so we would not have ot use these special conditions. Just makes our jobs harder.

    I love the pictures on your site, my son really liked the Gorillas, we spend almost an hour looking at all the pictures.

    Thanks,
    Michael

  3. Terry N Says:
    March 30th, 2007 at 3:29 pm

    Michael, thanks for visiting my website and for the feedback. Im glad your son and you liked the Gorillas! :).
    I used your conditional CSS concept to make the new CSS only menu at the top of my webpages to work with IE 6 properly. It worked with either IE6 or all other browsers. Now it works with all. IE6 was placing a notch in my menu due to a discrepency in how it calculated border size so I just needed a 2 pixel correction for IE6 only. Now Im working on how to round the corners of divs inside my page for all the major browers. It works for all except, guess what? IE6 and IE7. Its a bit more complicated since the entire body of my page is inside a big rounded div already. Well I will figure it out eventually. Thanks again for your work and for your feedback. –Terry

Leave a Reply