<div> dividers…

While migrating a site over to XHTML and CSS I discovered a bug in Internet Explorer 6. I was surprised that I hadn’t seen this one documented before, so I thought I’d write something up. Instead of using horizontal rules <hr> I like to create divs with a background color and a small height instead, browser support for styling <hr> is spotty at best, and using a div you can add additional properties to control the width and height, or add a background image.

If you create a <div> tag and set the height=2 px, even if the tag is empty, i.e. no nbsp IE will exhibit a strange behavior.
Example:

<div style="background:#00FF00;height:2px;"></div>

<div style="background:#0000FF;height:2px;"></div>

Here is what the above code looks like:

Now let the fun begin. Open this page in IE 6 or lower. Then hold down the ctrl key and scroll your mouse wheel up and down (Or use the View menu, Text Size options to change the text size). You will notice that the fixed height divs above actually get larger and smaller. To correct this add “font-size:0%;” to you style sheet and the results will look like this instead:

This is a handy trick.