From : http://www.maratz.com/
The summary of our latest project client-side development brought to conclusion that there’re are really just a few essential Internet Explorer hacks. By careful structure planning, I managed to stripe down all hackery to a much less additional rules. Since they are promising IE7 some time soon, more and more I think about secure CSS hacking. We surely don’t want our sites to be a mess in IE7 for it’s quite possibly half-repaired CSS support.
Conditional Comments
The alpha and the omega of IE hacking are IE’s conditional comments. They are IE-only feature and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.
The typical usage is as follows:
<!--[if IE]>
do something
< ![endif]–>
Untill now I used to write something like above, which applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but since the latest announcements, I started applying the following condition:
<!--[if lte IE 6]>
do something
< ![endif]–>
which means: “if this is Internet Explorer less than or equal to version 6, do something”. My thoughts are—if they keep conditional comments feature in IE7, then the browser will ignore this, since it’s version designation number is 7. On the other hand, if they abandon that feature, the browser will assume that this is just another HTML comment.
When I work on a layout I usually place all hacks for some selector immediately after its’ default rule. This way, changes can be done quickly and without searching for the corresponding hack in other places.
After I’m done with layout, I like to go through all of the CSS files once again and optimize everything from short-hand properties to assigning the same rule for multiple selectors. At that point all hacks are removed to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.
<!--[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie_hacks.css” />
< ![endif]–>
While still in main CSS file, hacked selectors start with * html. This is known as the ‘star-HTML’ hack. Standard compliant browsers ignore this selector, because there’s actually no elements above html in a document tree. Luckily, IE doesn’t know that and we’re safe to use this flaw when applying IE specific hacks. Once we move hacks to a separate file and call it in a document with conditional comments, it’s safe to remove the * html part.
Further on in the text, assume that we are dealing with separate file with IE hacks only.
Backslash hack for IE 5.x broken box model
A combination of width and padding on the same element is very well known to produce broken layouts in IE 5.x. Box model hack is widely used and can be stripped down to a few lines.
someselector {
padding: 10px;
width: 200px;
width: 180px;
height: 200px;
height: 180px;
}
This will give as an element which is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.
If floated and with margin, display: inline
Everything that is floated and has any margin larger than zero, should have additional rule display: inline;. Simple as that. More about the ‘Holly hacks’ read at P.I.E..
Overflow problems
Italic font style in any IE version will enlarge parent element horizontally. It’s usually just a few pixels, but it could be nasty and ugly few pixels. Simple solution is in the following rule:
someselector {
overflow-x: hidden;
}
I tend to apply that rule to every major column in a layout, especially in the period right after site launch. For the first week or two, when the large amounts of content are added and removed day and night by the site’s editors, it’s better to prevent content slips out of it’s boxes. A small digression—editors are sometimes inexperienced, but it’s not their job to know every HTML element and that’s why adequate support in their few first attempts is essential. There’s no worst for the guy who manage the content on his company’s brand new, ultra-modern and expensive web site, than the massive layout breakage when the site is still fresh and under the eyes of CEO. It’s our responsibility to keep his confidence intact.
Font size in tables in IE 5.x
Font rules set in html or body element are ignored in tables in case of IE 5.x. Again, simple addition will take care of it.
body {
font-size: 62.5%;
}
table {
font-size: 1em;
}
Later in a process, you can change rules according to a particular table’s needs.
To conclude…
CSS hacks are necessary evil, but with defensive approach, we can make sure they safely co-exist with default CSS rules, even in future browsers. What are your thoughts?
