The Ultimate IE Hack Guide {reposted}

You’ve designed the perfect website. You’re checking it in all browsers. Firefox - check, Safari - check, Opera - check, Internet Explorer - ah, am I looking at a website? We’ve all been there. Until Microsoft starts supporting web standards, properly coded websites are always going to look like crap in IE. That’s a shame because Internet Explorer is (unfortunately) the most popular browser. So, how do you make your website look great in Internet Explorer while maintain standards for all browsers? Here are some tips that I gather from various guides around the internet.

But before we go into these hacks, all of these hack will evolve around CSS. If you’re not using CSS and your trying to write standard compliant code, you’re in the wrong field. CSS is the way to do things nowadays on the web, and you should be using it. I won’t give you a whole explanation on how CSS works, so I’m assuming you know it. If you don’t you might want to check out this guide then come back here.

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.

he 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; /* IE Hack * /
}

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.

The Alternative Style Sheet Hack

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.

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.

Source: Cavemonkey50.com