IE giving small divs a minimum height

I ran into a funny problem recently. I had to build an odd layout for a new website at work that involved text following a bending curve. Well, I just gave different padding to each of the <p> tags to accomplish the flowing effect. There were also divider lines between each paragraph that were shorter horizontally than the paragraphs. So, to get around this, I figured I could just create a div with a set width, a height of 2px, and a border-bottom. Of course, this worked fine in all browsers. . . except IE.

For some reason, the div in IE defaulted to a height of around 10px. This was very odd seeing as how I specified a height of 2px in the CSS. Well, after some playing around and a little Google-ing I figured out the problem. Apparently, IE will override the height property if the line-height is greater than the height. So, to get around this little problem, simply set your line-height to a value equal to or less than the desired height of the div.

Here is my code:

            .line {
               width: 218px;
               height: 2px;
               line-height: 1px;
               border-bottom: 1px solid #CED9DF;
            }
            

Update: After some more research into the problem, it turns out that IE 6 thinks the height of your div is only as small as your font-size. So, instead of setting your line-height to zero or a small number, set your font-size, like so:

            .line {
               width: 218px;
               height: 2px;
               font-size: 0;
               border-bottom: 1px solid #CED9DF;
            }
            

Tagged: xhtml, css, ie sucks

Leave a comment: