IE CSS Bugs

Wow! IE Bugs have been so prevalent that there are entire websites dedicated to workarounds. I've found the use for one today.

How To Attack An Internet Explorer (Win) Display Bug
http://www.communitymx.com/content/article.cfm?page=1&cid=C37E0

Table-less div pages are a boon, in the sense that it is very easy to manage / modify. But IE CSS implementation is so buggy that it can become a nightmare.

I had some nested divs that were static, absolute, visible, hidden, floating. Basically a reasonably complicated page for the intended look I wanted. Then certain divs starting behaving erratically when they would disappear along with text inside them. More popularly knows as ...

The Peekaboo bug
http://www.positioniseverything.net/explorer/peekaboo.html

Some basic hacks will help solve the problems.

- Whenever possible, give an explicit dimension to all block elements. This helps IE a lot.
- If you want to keep certain elements liquid, then use the following hacks

{position: relative}

This CSS code solves some IE bugs such as Eric Meyer's Punch Out Demo. Divs contained inside another, get hidden if you try to use them to hide the borders (for example) of the container div (using negative margins for example). By using the above CSS hack, this problem is solved without any side effects on other browsers.

The Holly Hack
{height: 1%}

When you need a liquid div and provide no dimensions to a div, sometimes IE fails to display it properly during resize, etc. This hack helps IE and solves the problem (only when the content actually exceeds the prescribed dimension of the div. Since 1% is small enough for even a little content, it works). Not exactly W3C compliant but it does. But this can have a side effect on other non IE/Win W3C compliant browsers. So we need to apply this and other such IE specific hacks in combination with other hacks.

To hide the holly hack side effect from IE5/Mac, use the IE5-Mac hack

/* Hides from IE5-mac \*/

/* End hide from IE5-mac */

The backslash at the end of first line serves as an escape character in IE5/Mac and any code in between the 2 lines is treated as comments.

Tan Hack

* html .buggybox {height: 1%;}

"* html" is an IE (Win and Mac) only specific CSS element and is ignored by other browsers. So the above code is an implementation of the Holly Hack using the Tan Hack.