So earlier this week I developing some CSS code, that I needed to mandate a minimum with, that grows as the content in it grows. Firefox has a nice min-height and a height attribute, so I use the following code.
#ExpandBox {
min-height: 34px;
height: auto;

But if I use that code in IE, it will ignore the min-height attribute, and basically treat the height property as its own min-height, collapsing the box to the size of a pea. To get around this, I used the !important hack.

#ExpandBox {
min-height: 34px;
height: auto !important;
height: 34px;

Since Firefox understands important as the end all be all, it ignores further decelerations of the height attribute, where as IE doesn’t exactly see it that way, so it uses the next height attribute. Since IE will auto expand anyway, we basicaly have success. Yaay me.

Now everything works perfectly fine here, but now take out the ability to use the !important flag in the future and hold everything else consistent, DOH now I’m screwed.

We’ve got some solutions to this, the best one probably being conditional comments.
<!--[if IE]>
<link href='ieonlyoverrides.css' rel='stylesheet' type='text/css'/>

So this lets me declare a seperate #ExpandBox decleration that overrides the general one for standards compliant browsers.

I’ll be the first to admit I dispise having to do this in a seperate file. Why can’t we just do this in the CSS file? Well, principally, we would like to try to avoid IE only checks in the CSS stylesheet (well, really anywhere, but particularly in the stylesheet). Its capability checks we should do, so that if IE all of a sudden started supporting the !important flag as FireFox does, were still golden, we don’t have to change a thing in our previous code. Yet if we had an IE check in there, well, they are spread all through the file and there’s no getting around adhearing to those rules.

If you’ve got a style guide in your system, and you want it to degrade nicely for IE, you will sooner or later need to implement this type of feature. You avoid having to use hacks, you won’t need to try to shove all the degrade code in the same class, and well, you can easily erase the ieonlyoverrides.css styles and see how your browser reacts every time there is a new version of IE.

1 comment

One Response to “Conditional Comments, just do it.”

  1. Black Belt Coder » Quick and easy IE only CSS Says:

    […] I remember from watching a video on the YUI Theater by Nate Koechley on the YUI CSS Foundain library and heard a sweet little trick to write CSS comments for IE only without using conditional comments. […]

Leave a Reply