IE Hacks Galore

Next post
You should follow Combs Consulting on twitter
Far Out Man

IE sucks as a browser and will one day be WC3 complient, but until them we will have to hack it. Fortunately Microsoft knew their browser sucks so they wrote in over-rides for designers to make changes.

(FireFox, Safari, Opera, & Chrome have not written their’s and they should!)

(Note: I hope you understand Order of Operation. Basically, CSS will override the previous CSS if you write another revision after it.)
An example:
.header {height:300px;}
.header {height:250px;}
Based upon Order of Operation you browser will assume the height of 250 pixels and ignore the 300 pixels.)
Below I describe what I use on a day to day basis for hacking IE.

Style Sheet Hacking

Style sheet hacking is my prefered use of hacking because you can use one style sheet and don't have to worry about importing other Conditional Comment Hacked Sheets which is a maintaince nightmare.

.header {width:300px;height:200px;background:#000;} /* Applies to all browsers */
*.header {width:310px;height:200px;background:#000;} /* Applies to all IE browsers */
_.header {width:290px;height:200px;background:#000;} /* Applies to all IE browsers 6 and below */
.header {width /*\**/:330px\9;height:200px;background:#000;} /* Applies to IE 8 */
(Note: IE 8 is a diffent animal, it is tying to act like web-kit. A tip of the hat to Safari and Crome.
gear

Explanation:

Placing a "*" in front of your class will over-ride the headers with to 310 pixels. The "_" over-rides both the "*" width of 310 pixels and the normal width of 300 pixels to a with of 290 pixels for IE 6 and below.

Conditional Comment Hack

I prefer not to use this hack because it adds so much code, more code equals higher bandwidth and more importantly it hurts your SEO.

Example

<html>
<head>

<link rel="stylesheet" type="text/css" href="styles.css" />

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

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie3.css" />
<![endif]-->

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

</head>
<body>
</html>
gear

Explanation:

What’s going on here is that we are specifying which version of IE should import the proper CSS.

if IE means if you are IE load ie.css

if IE 5 means if you are IE 5 load ie5.css

if lt IE 7 means if you are "less than" IE 7 (meaning IE 3, IE 4, IE 5, IE 5.5, or IE 6) load ie6.css

if gte IE 8 means if you are "greater than or equal to" IE 8 than load ie8.css

More IE Hack Refrences

IE 6 and below
     * html {}

IE 7 and below
     *:first-child+html {} * html {}

IE 7 only
     *:first-child+html {}

IE 7 and modern browsers only
     html>body {}

IE 8 only
     {margin-left /*\**/:-100px\9 }

Modern browsers only (not IE 7)
     html>/**/body{}

Recent Opera versions 9 and below
     html:first-child {}

Need to get multiple versions of IE running on your PC try IE Tester or Multiple IE:
Try IE Tester or Multiple IE
IE Tester
Multiple IE

Share This Subscribe to the RSS feed. Back to the Blog