Cannot set the height of a DIV element in IE 6? Read on…

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.

Bookmark this post: technorati Cannot set the height of a DIV element in IE 6? Read on... delicious Cannot set the height of a DIV element in IE 6? Read on... stumbleupon Cannot set the height of a DIV element in IE 6? Read on... digg Cannot set the height of a DIV element in IE 6? Read on... facebook Cannot set the height of a DIV element in IE 6? Read on... yahoo Cannot set the height of a DIV element in IE 6? Read on... google Cannot set the height of a DIV element in IE 6? Read on... magnolia Cannot set the height of a DIV element in IE 6? Read on... reddit Cannot set the height of a DIV element in IE 6? Read on... windowslive Cannot set the height of a DIV element in IE 6? Read on...

Tags: , , ,

Related posts

4 Responses to “Cannot set the height of a DIV element in IE 6? Read on…”


  1. 1 debu

    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.

  2. 2 Anonymous

    Thanks
    Jep this works

  3. 3 Anonymous

    I had this problem if you add

    overflow:hidden;

    to your style sheet it seems to work fine in IE6

  4. 4 Victor Stanciu

    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.

Leave a Reply




/kapil/blog is Digg proof thanks to caching by WP Super Cache!