A hack is a method of exploiting the way a web browser processes or parses CSS instructions, to control the styles a webpage. ‘Control’ includes the ability to hide or change rules based on the browser type and version. A hack can also be called a filter, as it can be used to selectively deliver or filter the content, presentation or code that a browser receives.

Before elaborating on CSS hacks, let us look at an example. Suppose you have written a piece of CSS code for your structured HTML or XML. You get your desired effects in Internet Explorer 6. But while testing the page in Mozilla, you find that widths are different, page is broken and so many other problems. So when you get it right in Mozilla, it doesn’t work in IE.

Normally, it is because of different and incorrect box models. Mozilla tends to display the CSS as it should be, but it does have the odd bug in its system. IE5 and IE5.5 have some CSS problems and so some things would look different in these browsers compared to what they look like in, say, IE6. So, it is important that CSS looks similar in all these browsers like Internet Explorer 5/5.5, Internet Explorer 6+ and Mozilla/Netscape 6. You can try out simple CSS hacks that will make CSS work similarly in all browsers.

But the versions of Internet Explorer before IE 6 work in a different manner. In the Document Object Model (DOM) of these versions, the width of the box is worked out by adding the width of the content to any border or padding. To understand this thing in a better manner, let us look at an example. If there is a 100px box without any padding and margin, it would render the same effect in IE as well as in Mozilla. Now, add 10px padding to the box. In Mozilla, the box size would be 120px wide including content and padding. But there will be no change in the size of the box in IE. It would continue to be 100px. Similarly, if you add 10px border and 10px margin on all sides, the Mozilla box would be 160px wide. Now, there would be a change in the box size in IE. The box would expand to 120px including 100px for the content, border and padding and 20px for the margins on both sides.

There is an eternal problem with the box model in the Internet Explorer. You need to look for a solution for this incorrect delivering of the box model, so that all Web pages are viewed similarly irrespective of what browser views them.

In simple terms, the box model hack makes extensive use of bugs in IE to compel it to utilize CSS tags which rest of the browsers will overlook. Have a look at the following piece of code:

div {
width: 100px;
padding: 20px;
border: 10px solid #000;
}

The output of this code is a box of 100px width in Internet Explorer and 160px of width in all other browsers. To rectify this problem, you need to establish two div selectors. One of those two selectors defines the width for IE at 160px and the other selector defines the width for compliant browsers at 100px.

Tags: Box Model, CSS