Tag Archive: CSS Hacking

If you are trying to do pixel-perfect cross-browser CSS layout, then you have probably ran into problems with IE . I am going to highlight the top 5 CSS hacks that we often use to have pixel perfect design.

1)Box Model Hack

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on

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.

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.

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.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.

A CSS hacking is basically about exploiting one browser bug to solve another. Now a new browser comes out that solves the exploited bugs, but not the other and people start advocating hacking to be stopped. It’s not that simple. Hacks are wrong (forget what I said in Implement CSS 2.1. The reason they are is that using them might prevent further enhancements to a specification. Something that’s invalid now might be a feature in the future.

Arriving at this point in my little rant I realize that the only point in not updating your site to exclude CSS hacks is that the intentention is probably wrong. Let me explain. Updating for Internet Explorer 7 should not be necessary, in theory it fixed its CSS bugs and besides that _height:1% is now ignored, it also supports your nice method of float clearing using generated content. Except that it doesn’t. And there is the real problem. The day a comment before the DOCTYPE no longer triggers quirks mode I certainly hope they fixed all those nasty little buggers.