Tutorial: Page (1) of 1 - 04/17/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Revisiting "Bad" CSS, Part 2

IE conditionals, activate! By Kevin Schmitt

In part one of this fantastically riveting two-part series, we learned all about the insane fun that goes along with IE conditionals. Now, in part 2 (which I know you have been waiting breathlessly for), we're going to?wait for it?actually write some of said conditionals all by ourselves! I know, I know?the air is thick with excitement. So, without further ado, let's get this party started.

Recap time

Just to quickly bring everyone back to speed, let me re-introduce you to the esteemed Figure 1 from our last installment:

Figure 1: This is not IE

If you recall, Figure 1 will appear differently depending on the browser you are using. Red box with an X through the IE logo in Firefox, yellow box with the new IE 7 logo in IE 7, etc. When we last left off, we had just written the basic HTML code for Figure 1, and had shaken hands with the images that we need to use. If you're in need of a link back to part 1 to catch up, just click right here.

Now that we're all on the same page, let's forge ahead. The first thing we want to do is to set up the default state of the boxes as they'll be seen in non-IE browsers. If you're writing CSS on the same pages as your HTML code (e.g., not linked CSS) as we are, you can really put your <style> tags anywhere, but the best place is usually between the <head> tags (even though I'm not really doing that here). Just make sure the CSS is appears in the page before the HTML that calls it. At any rate, pick any place on your page above the HTML that we wrote back in part 1, and enter the following code:

<style type="text/css">
#box {
    width: 150px;
    height: 150px;
    border: 5px solid #1760bc;
    background: #b30000 url(ie6.png) no-repeat 10px 14px;
}
#boximg {
    width: 128px;
    height: 128px;
    background: url(noie.png) no-repeat 36px 38px;
}
</style>

What we've done here is give the container box (#box) a size, set the border to 5 pixels in width and colored it blue, and then set the background color to red with the IE 6 image placed as a non-repeating background. For the image box (#boximg), we've given it a size and set the background to the red "x" image. Now, if you were to preview this page in IE 6, it would just be nasty, as the left side of Figure 2 shows. However, in either IE 7 or browsers like Firefox, Safari, or Opera, you get the right half of Figure 2. Other than the strange run-on caption, it's looking pretty good.


Figure 2

As an aside, the fact that IE 7 renders CSS and transparent PNGs akin to the way other browsers have for a long time is the main reason I hope the release of IE 7 brings a swift and merciless death to earlier versions of IE. There are still many unaddressed CSS issues in IE 7, but generally, CSS you write for standards-compliant browsers stands a much better chance of working as desired in IE 7 than in earlier versions. Short of IE going away completely, the next best scenario for Web designers and developers is to root for fast adoption of IE 7.

But I digress. The next task is to write a series of IE conditionals to handle the various looks we want to give different versions of IE. Let's run through what those particular items are:

  1. For all versions of IE, we need to remove the red "x" image as well as hide the "This is not IE" text in the caption.
  2. For IE 7, we need a yellow background and the new IE logo.
  3. For pre-version 7 IE (5. 5.5, and 6), we need to use the same IE logo as the default, as well as make some tweaks to the positioning of the logo to make up for the borked box model rendering.
  4. For IE 6, we need to use the crazy AlphaImageLoader code IE 6 requires to display transparent PNG files.
  5. For pre-version 6 IE, we need to change the background to gray in order to cover up the fact that the transparent PNG is going to render with a gray background.

Again, I ask the rhetorical question first posed back in part 1: isn't designing for the Web fun? Anyway, now that we have our to-do list outlined, let's write the IE conditionals and the CSS that will make that happen. A quick word of warning first, though: remember that browsers deal with redundant CSS selectors on a "last come, first served" basis, meaning that if you have one selector defined in multiple styles, the browser will treat the last valid one it finds as what it thinks you actually meant. Therefore, you need to carefully plan the order in which your conditionals (and ultimately, your CSS) appear on the HTML page, since your selectors can (and often and will) conflict. So, in this case, make sure to start your conditionals after the default CSS style that we've already written, or else all browsers, IE or not, will get the default. Make sense? Good. Let's write the IE conditionals and CSS for item 1:

<!--[if IE]>
<style type="text/css">
.notie {
    display: none;
}
#box {
    background: none;
}
#boximg {
    background: none;
}
</style>
<![endif]-->

Basically, we're "cleansing the palette" by setting the backgrounds for the two boxes to none. We're also instructing any version of IE to hide the "This is not IE" text, so the caption is showing the proper text on all browsers. Let's move on to item 2, which is the code for IE 7:

<!--[if IE 7]>
<style type="text/css">
#box {
    background: #ffcc00;
}
#boximg {
    background: url(ie7.png);
    position: relative;
    left: 5px;
    top: 13px;
}
</style>
<![endif]-->

Here we're changing the background color of the container box (#box) to yellow, setting the background image of the image box (#boximg) to the IE 7 logo, and tweaking the position just a bit to make it appear more centered. This isn't because IE 7 messes up positioning?it's much better than IE 6 in that department. We're tweaking the positioning purely for cosmetic reasons here, as the yellow swoosh in the new IE logo throws off the balance a bit against the yellow background. Next up: item 3, which handles all IE versions prior to 7.

<!--[if lte IE 6]>
<style type="text/css">
#boximg {
    position: relative;
    left: 5px;
    top: 9px;
}
</style>
<![endif]-->

Now, we could have used [if lt IE 7] here as well?it's really just a matter of personal preference. In any event, anything below IE 7 will catapult us back into the realm of the horribly broken box model and overall positioning woes, so we're adjusting the positioning of the image box DIV so the IE 6 logo will appear in basically the same position as it does in the default setup on other browsers. Two more to go! Item 4 covers IE 6:

<!--[if IE 6]>
<style type="text/css">
#box {
    background: #ff581c;
}
#boximg {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='ie6.png');
}
</style>
<![endif]-->

Here's where things get a little freaky. The background color for the box DIV is straightforward enough, but what's with all that filter mumbo-jumbo? That's our bonus code for the day. What you see there in the image box selector is Microsoft's oh-so-clear method for having transparent PNG files actually appear transparent in IE 6. There are really only two things to worry about when using the AlphaImageLoader filter:

  • Make sure to point the src attribute at the correct image path, and
  • don't combine the filter code with any other CSS (e.g., wrapping it inside of a background style or something)?it's meant to stand on its own.

At any rate, the IE 6 logo should now reveal the orange background we've specified instead of the default gray that would be shown behind normally placed transparent PNG images in IE 6. That's a lot of unnecessary code, but at least it works, and it's a tremendous workaround as long as IE 6 continues to plague the Web design and development community. OK, last one?we have to deal with IE 5 and 5.5:

<!--[if lt IE 6]>
<style type="text/css">
#box {
    background: #c6c3c6;
}
#boximg {
    background: url(ie6.png);
}
</style>
<![endif]-->

Here we're just setting the drab gray background for the box DIV and doing a normal background image for the box image DIV, since we're in the land of zero support for transparent PNG files in pre-IE 6 versions. Oh, well. I trust we'll all get over it. Anyway, we're done. That wasn't so bad, was it?

Back in the real world...

Before I tear my rotator cuff trying to pat myself on the back for how simple everything is, it's time to take a step back and take a big whiff of reality. Yeah, it's not that hard to implement IE conditionals, but if you look back on the totality of code we wrote for the example, it translates into a lot of hoops one has to jump through just to address IE. But what else is new, right? Let's look on the bright side for a moment, and discuss how you would typically want to use IE conditionals to streamline your pages.

Remember, IE conditionals can be placed just about anywhere in HTML pages, but unfortunately, they won't work inside of an external CSS document. That would be ideal, but since it's not an option, a good strategy is to create CSS documents for whatever versions of IE are giving you trouble, and then invoking a conditional in the <head> of your HTML page (where the external CSS calls usually go) to load the proper CSS. An example might look something like this:

<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="path/to/main.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie.css" />
<![endif]-->
</head>

This way, you're keeping the body of your HTML document relatively clean and free of extraneous code while keeping your CSS organized in multiple external documents. It's still not optimal, but it will have to do. And for all the IE-bashing, there are some nuggets of great news. For one, you'll likely find that IE 7 will, in many day-to-day rendering chores, come really close to displaying pages the same way that standards-compliant browsers do, and to that, I say it's about time. You'll still need to tweak pages for display in IE 5, 5.5, or 6, but with IE conditionals, you can move that code out of the realm of non-validating hacks and into cleaner, more standards-compliant code.


Page: 1


Though the fame, riches, and notoriety of being a DMN contributor are both tantalizing and substantial, Kevin Schmitt still stubbornly insists on continuing his work as the Director of Interactive Services at EFX Media, a production house located just outside of Washington, D.C. Feel free to follow his updates and contact him through Twitter if you have something to share - he's ready to believe you!
Related Keywords:internet explorer, css, html, web design

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved