I almost banged my head in the wall before I could solve this problem. I wanted to set the height of a DIV element using CSS/Element property. I did that and it worked perfectly fine for me in Firefox. This is what I did:
<div id=”myDiv” style=”height: 4px;”></div>
I came to know about the trouble when I tried to open the page in Internet Explorer 6 (By the way, it works fine even in IE 7). After much investigation I could understand that tough IE6 honors the height property for a DIV, it is not capable of rendering a DIV with height less than 10px. I tried various ways of doing this, but all in vain.
My UI wanted a DIV with height less than 10px, and so I had to solve this problem somehow. After lots and lots of hit and trial, the following code worked for.
<div id=”myDiv” style=”height: 4px;”><!– –></div>
Morals of the story:
1. This is yet another difference between IE and Firefox.
2. DIV elements in IE6 don’t seem to understand the height property with an empty stomach. So if you put some text in the DIV (even if it is void, <!– –>), it starts behaving well.













Hello,
Thanks friend I need this code. You are right DIV elements in IE6 don’t seem to understand the height property with an empty stomach.
regards.
Debopriyo.
Thanks
Jep this works
I had this problem if you add
overflow:hidden;
to your style sheet it seems to work fine in IE6
It’s because of the font size and line-height. Internet explorer leaves space for text content, even if the element doesn’t have any. That’s why inserting a comment works, because it makes IE render the element without any content.
If you set font-size: 1px for that element, it should work.