Support Contact:
Phone: +40 (21) 310.63.42; Forums:

How to get around the background height 1px IE6 bug

IE 6 is dead but does not surrender! Like everybody else in the Web Design industry I hope IE6 will eventually go away, but in the meanwhile, much to my surprise, it’s still widely used by big US corporations due to a mixture of un-flexible upgrade policies or the “use as it is” trend.

So, for now, the safest bet is to still have a decent layout on IE 6, but you will need some workarounds. For example, doing a 1 pixel height line will not work on IE6, although is a quite decent thing to ask. The “background height 1px IE6 bug” says that instead of seeing a 1px line, IE6 will make it the height of the default font. Here is the code I’m talking about:

<div style=”background-color:#F00; width:600px; height:1px;”></div> – you would expect to see a 1pixel red line correct? Well, it does in all browsers except IE6 – here is a link to test it.

The workaround is quite simple: add a &nbsp; inside the DIV tag and “line-height:1px” at the end of the style used for the div (style can be applied on the div either inline, or through a class). Here we go:

<div style=”background-color:#F00; width:600px; height:1px; line-height:1px”>&nbsp;</div>


Facebook comments:

Leave a Reply