Skip to content

Updating my CSS for IE7

I’ve finally gotten around to testing websites at both The State News and at Artemis Solutions to check for IE7 compatibility.  Some of the sites had new errors due to the changes in IE7’s rendering engine.  One noticeable change was IE7 now correctly supported the !important tag which I had been using in my CSS to solve cross-browser inconsistencies.  I would need a new method for giving style to only IE7…

The :lang Hack

Apparently there is still at least one CSS hack around that you can use to specify between IE and Firefox. But I’m done with hacks. It’s too easy for the browser makers to just release an update that breaks every one of your sites.

Conditional Comments

A coworker pointed this one out to me. This is Microsoft’s solution to the problem. It allows you to include a separate stylesheet for only IE. The beauty is it hides the include inside a comment meaning your page will still validate.

Here’s a quick example:

<link rel="stylesheet" type="text/css" href="style.css" />
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]–>

That will allow you to create a style sheet for every browser (style.css) and then overwrite any of those styles for just Internet Explorer (style-ie.css). A decent solution but I’m just too stuck in my ways. I don’t like the idea having a separate stylesheet just for IE.

Conditional Body Class

I then came up with this solution which is kind of a combination of the two ideas. The lang hack is nice because it allows you to keep all of your CSS in a single file. The conditional comments are nice because they aren’t actually a hack and will most likely be included in all future releases of Internet Explorer.

Here’s the code:

<html>
    <head>
        <title>IE TEST</title>
        <style>
            div#frog{
                width:180px;
                padding: 10px;
                background: #f60
            }

            /* IE ONLY STYLE */
            body.ie div#frog{
                width: 200px;
                background: #99f;
            }
        </style>
    </head>
    <!–[if IE]>
    <body class="ie">
    <![endif]–>
    <!–[if !IE]>–>
    <body>
    <!–<![endif]–>
        <div id="frog">
            asdf
        </div>
    </body>
</html>

The idea here is pretty simple. Put the conditional comments around the body tag and give the body a class. Then within your stylesheet, you can define styles for just your "ie" body.

There is one downfall to this method. Internet Explorer is going to get two body tags (the one within the conditional comment and the one after that). However, a quick check of IE’s DOM, and you’ll see that it just ignores any body tags after the first one.

Joe Sak pointed out that you can put conditional comments around the regular body tag telling IE to ignore it.  You then just comment out the IF and ENDIF separately, which allows it to validate and non-IE browsers will know to read the body tag.  I’ve updated the code above to reflect this method.

So there you have it. A clean, simple solution to cross-browser CSS.

Comments Post a Comment

You can use conditional comments so IE only gets one body tag

all browsers will ignore the second set of conditional comments, not knowing what to do with them, and will read the code between them. IE will read it as “if not IE, do this” and it says, well, I’m IE so I’m not going to do this.

Joe-
Good point. My main goal here was to present the best w3c compliant method for this. That’s the beauty of Microsoft’s conditional comments, they hide their conditional statement inside of a w3c compliant comment. However, this also prevents the use of conditional statements in any other instance, because outside of a comment, the code just won’t validate.

Edit: After a quick test, I’ve found you can actually comment out the IF and ENDIF statements individually. Hiding those statements within comments allows you to use the !IE and still have the page validate.

[…] to look into how to best embed flash with today’s browsers. Due to my recent work on the Conditional Body Class method, I ended up creating something using the same […]

[…] posted about this some time ago, but I really think this is one of the most unique methods I use in my coding […]

Great information. Lucky me I came across your website by
chance (stumbleupon). I’ve book-marked it for later!

Knowing the requirements and the choices you will have to make will give you a head start prior to enrolling in your certificate program.
You probably didn’t know, but the American Red Cross has provided nursing assistant training classes for more than two decades.
You can check with the licensing authority of the
respective state for the CNA certification renewal steps.

Post a Comment

Extra information for this entry