17 October, 2007

Div height problem in IE


The following, as the only content in a file, is the requested 5px high in Mozilla and Opera, but 12px high in IE (5.0, 6.0 & 7.o):

<div class="dot" style="height:1px; border:1px solid red;"></div>

Divs in IE have a minimum height when the <div> is empty. There is a couple of ways to solve this:
1) Put a comment tag inside the div:
<div class="dot" style="height:1px; border:1px solid red;"><!-- --></div>

2) Add this to its style inside the div:
<div class="dot" style="font-size:2px; height:2px; border:1px solid red;"></div>

3 comments:

Anonymous said...

Thanks. This is the solutions I was looking.

Thanks alot for sharing this.

Shafaat Awan
http://www.makadco.com

Anonymous said...

div style="font-size:0"

or

div style="overflow:hidden"

Jason said...

The solutions:

div style="font-size:0"
or
div style="overflow:hidden"

is not working, due to it will make the "dot" missing in the div.