CSS Hacks for Internet Explorer

 

IE Specific Code

The most common problem with IE is it does things completely different than all other browsers. So, to overcome this problem you have to tell IE specifically what to do. Now there are two methods (that I like) that will overcome this problem. There is an underscore hack and a alternative style sheet hack. Each of these techniques have their own advantages and disadvantages, but in the end they will both function the same way.

The Underscore Hack

The underscore hack is particularly useful if you only have a few minor things that need adjustments. It’s also useful since you can keep your IE CSS with the real CSS, making it easier for adjustments down the road. Now you’re probably wondering how the underscore hack works.

Let’s say you a class called text, and you want to apply a 10 pixel margin to that text. The 10 pixel margin looks great in every browser but IE. To make IE look better you think it needs a 15 pixel margin. To accomplish that you need to give IE code that only it will understand. This can be done by the following code:

.text {
	margin: 10px;
	_margin: 15px;
}

This hack works because IE is stupid. An underscore in CSS acts as a comment for that attribute only, and all browsers but IE honor this. Since IE doesn’t follow the underscore rule, placing the same attribute with an underscore after the real attribute will redefine that attribute for IE, while all other browsers will skip the second redefined attribute. Ah, using IE’s stupidity to solve IE stupidity. Brilliant!

The Alternative Style Sheet Hack

This “hack”, is my favorite for a number of reasons. By having a separate style sheet just for IE, you can keep all of the nasty invalid code from all other browsers. The IE style sheet also keeps your real style sheet clean and clutter free. The best part of it is that it’s really simply.

To use an alternative style sheet for IE, the first thing you’ll need to do is add an extra line in your HTML’s head section pointing to the IE style sheet. Basically what you’re going to be doing is adding a second style sheet, except using a CSS conditional comment to make that style sheet only apply to Internet Explorer. The code to accomplish the second style sheet will look like this:

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

It should be noted that the IE specific style sheet needs to be after the original style sheet. That way any IE CSS will override the real CSS value. To finish off the alternative style sheet, create a new CSS file called ie.css and throw all the IE specific code in there. You don’t need to do anything special to the code; just treat any CSS code that you put in there like it’s a normal CSS file.

Now from this point on, I’m going to be assuming that any IE hacks you use will be put into this ie.css file. If you don’t want to use the alternative style sheet, you can modify the rest of the hacks to use the underscore hack, but this may cause invalid code, etc. So, it’s best to just stick with the alternative style sheet for the rest of these hacks.

Transparent PNGs

If you’ve ever used a transparent PNG in Internet Explorer, you’ll notice it doesn’t handle them to well. You’ll get an ugly grayish type background wherever it’s supposed to be transparent. So how do you handle this? Use GIFs? No, because GIFs just plain suck for everything, and aren’t good for higher resolution images. Do you use JPGs that fake what it would look like to be transparent? No, because sometimes browsers will render colors differently, screwing up the blending. Then what do you do? You use a simple CSS hack.

Who would have thought that a CSS hack could fix a major flaw in Internet Explorer, but it does. Alright to be honest this really isn’t a CSS hack, but CSS is involved. What this involves is a .htc file. I won’t get into the specifics of how this works, but if you want to know more about HTC you can read about it on Microsoft’s Developer Network. All you need to know is how to set this up.

What you’re going to need is two files. A HTC script and a transparent GIF. I’ve got both files available for download here. Now to be honest with you, I didn’t create this script. Aaron Porter created this script. Now unfortunately I downloaded this script many, many moons ago, so I don’t know where I got it, or who Aaron Porter is. So, if someone knows the original source of the HTC script, let me know. I’ll give proper credit where it’s due.

Now that you have the files, upload them to wherever you store your ie.css file. Now we’ll need to add one simple line of CSS code and we’ll be set. Add this to your ie.css file:

img.pngfix {
	behavior: url(pngHack.htc);
}

Now all you have to do is add the class pngfix to any transparent PNGs that you want to work in IE. Simple, wasn’t it?

IE’s Max-width

If you’ve ever tried to use the max-width CSS property, you’ll know IE doesn’t support it. Now some web developers will code around it, but I’m not one of those. Max-width to me is a very useful CSS property, and I’m going use it. So, how do you get IE to use a max-width? With some IE specific code of course!

This is a simple one line CSS addition to ie.css. Just add this line to any class or id where you would have normally used max-width:

.class {
	width: expression(this.width > 533 ? 533: true);
}

You’ll of course want to replace 533 with the maximum number of pixels you’ll be using, but beyond that it’s that simple.

You may also like...