Dealing with Internet Explorer

As most web developers know, Internet Explorer is flawed in many aspects. There is no arguing here. Nothing aligns or just plain works in IE when coded to web standards. I, personally, code in Firefox but am scared of what Internet Explorer has conjured up for me this time when I click that little button on my browser. I, alas, must take the extra step to code for our misguided IE users so that they can enjoy the internet as much as the rest of us. So, I am here to recommend a couple ways to "hack" IE to display CSS correctly and congruently throughout your website.

How to Use !important

This method is good for very specific cases in your CSS that require some tweaking in IE to display properly. Unfortunately, Internet Explorer 7 now supports this, rendering it somewhat obsolete. But, I digress. So, say you wanted to position something relatively. Naturally, you would use this code:

div.boxor {
  position: realtive;
  top: 10px;
  left: 25px;
}

But, Internet Explorer's box model is off and renders it too far over. How do we compensate? The !important tag, that is. In order to do this, copy the command and add !important after the original command. Then, change the second, copied command to an approximate but different amount of pixels, like so:

div.boxor {
  position: realtive;
  top: 10px;
  left: 25px !important;
  left: 20px;
}

What you're doing is setting two different values for "left". The !important tells the web-standard compliant browser (such as Firefox or Opera) to give it precedence over the other, while the IE will follow the second command because it does not recognize the !important. This, in turn, allows you to tweak the position in IE and other browsers to that they appear in the same position on the browsers. This allows the website to be more user-friendly and more astheically pleasing.

Important Notes: Be sure to put a space between the command and !important or else it will not work. Also, keep in mind that IE 7 supports the !important tag. So, if it's off in IE 7 still, after adjusting for IE 6, there's really nothing more with this method you can do.

Alternate Style Sheets

My second method that proved more effective that the important tag for me is using alternate style sheets for IE all together. This isn't as daunting as it sounds. You just create a separate style sheet file and name it something different. (Normally, I just take the name and add IE to the end. e.g. styleIE.css) In the new style sheet, you only need to redefine any elements that you need to change values for IE. So basically, don't copy everything. This way, if you change something in the original style sheet, you don't need to change it in both. Less work for you. Anything not defined in the alternate IE style sheet will use the original style sheet to define it.

Example:So let's say content isn't aligning correctly IE but is placed where you want it in another browser. Here is the original code: (style.css)

#content {
width: 287px; 
margin: -95px 0 0 117px;  
float: left; 
}

This is what your redefined CSS in the alternate style sheet should look like: (styleIE.css)

#content {
width: 287px; 
margin: -95px 0 0 58px;  
float: left; 
}

Now, the last step is to add the following code to the header of your index page, where you reference your CSS page. If you're using a PHP include of some sort, you will only need to put this on your "template" or index page. If you are using static HTML pages, you'll need to place this at the top of each page in the header.

<head>
<title>Your Site Name</title>
<link rel="stylesheet" media="screen" 
   type="text/css" href="style.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="styleIE.css" />
<![endif] -->
</head>

The tag "link rel=" is your initial referance for the original CSS page that web-standard compliant browsers will use. The text in bold is a little bit of PHP stating that if the broswer is less than or equal to (lte) IE version 7, use the second referance to the styleIE.css page. This works because the string is surrounded by <!-- comment brackets --> so regular broswers will discard it as a comment, but IE will read it anyway.

There are certain changes you can make to the coding to fit your needs if you wish. Instead of using lte (less than or equal to), you can use gte (greater than or equal to), lt (less than), gt (greater than), and nothing if you are selecting a specific version. You can also change the version of IE you want the style sheet to affect. This allows you to apply several style sheets for different versions of IE. Just copy the code and create a new style sheet. Be sure to change the version you wish it to affect and the name of the style sheet so that it references it correctly. Example:

<head>
<title>Your Site Name</title>
<link rel="stylesheet" media="screen" 
   type="text/css" href="style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="styleIE7.css" />
<![endif] -->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styleIE6.css" />
<![endif] -->
</head>

Since IE 7 creates a whole new level of problems for web designers, the simplest way to solve this is to create seperate style sheets for IE 7, IE 6 and below, and web-standard compliant browsers. This way, you can easily manage your style sheets while being able to cater to all users.

A Frankenstein Combonation

I have found that if you are reluctant to create more than 2 style sheets, you can use a combonation of the !important and an alternate style sheet to correct the atroscities of IE 7. In order to do so, create an alternate style sheet in the manner explained above and make the changes so that it works in IE 6 and below. Then, use !important on any elements that are now aligned incorrectly or whatever the problem is in the alternate style sheet. IE 7 supports !important, so that they will change in IE 7 but not in IE 6. IE 6 will use the second definition.

Example: (styleIE.css)

#content {
width: 287px; 
margin: -95px 0 0 117px !important; This will align in IE 7 
margin: -95px 0 0 58px;  This will align for IE 6 and below
float: left; 
}

My Thoughts: I trying to get away from using this method because I feel that it makes the CSS code for the alternate style sheet hard to read. I also feel like I'm over-hacking a little. But, if you are willing to use it, go for it. Make sure it validates, though!

The Conclusion

These are just two methods that I use to "hack" IE in order to display CSS properly. There are many flaws in IE and many hacks for them. You are welcome to look up others. It is important to make sure that your website is readable and accessible to all users no matter what horrific browser they're using. I hope this helped you learn to deal with Internet Explorer.