Getting a 1 Pixel high DIV in IE6

For a web designer, IE6 is a real prick of a browser. You are constantly having to use hacks on CSS to make it work for just one browser, which is now over seven years old.

I was having problems with the following code (inline styles used for simplicity):

<div style="height: 1px; background-color: #000000;"></div>

In most of the “real” browsers (Opera, Safari, Camino, Firefox and even IE7) this showed up perfectly as a one pixel high black line. In IE6, it comes up as a line around 16 pixels high.

To make it render correctly in IE6 (And still work in the “real” browsers) you need to add a non breaking space inside the DIV and supply the line-height style.
Here is the fix:

<div style="height: 1px; line-height: 1px;
background-color: #000000;">&nbsp;</div>

You May Also Like

About the Author: John

Leave a Reply

Your email address will not be published. Required fields are marked *