Previous Message
Next Message

Re: [css-d] <div> height in IE6

Sent by Lrn+cssdiscuss on 21 January 2003 19:07

Yexley Robert D Contr Det 1 AFRL/WSI wrote:

> I've done about as much digging around as I know to do, and I can't
> seem to find anything that will explain this, so I was hoping
> someone here might be able to shed some light on this.  I've
> declared a CSS class, and applied it to a <div> tag in my document,
> and it doesn't appear to be rendering the height property correctly
> in IE6.  I can't figure out why, but it appears that it won't
> display the <div> any smaller than about 12 pixels or so high.  If I
> try to set the height property of the class to 4 pixels, it won't
> display it at 4 pixels high, it will display it at the
> [approximately] 12 pixel "minimum".  If I open the same document in
> Mozilla, it display just fine.  Does anyone happen to have any idea
> why IE6 won't display a <div> any less than 12 (or so) pixels high??
>  Does this possibly have anything to do with IE's broken box type?
> If I apply the hack to the class spec, will that fix it maybe??  Any
> thoughts would be greatly appreciated.  Thanks in advance.

I have had similar problems with div's in IE. I believe the problem
is that IE generates an empty text-element inside, and then forces the
content to fit. I.e., the height cannot be less than the line-height
of the contents.

If your box is empty, you can set  line-height:0px , and it should
counter the problem. Another solution is to put an HTML-comment inside
the div, i.e.
 <div ...><!-- --></div>

A quick test shows that only the first of these div's has too large a
height (IE6, standards mode):

<div style="height:5px;width:5px;border:1px solid black;"></div>
<div style="height:5px;width:5px;border:1px solid black;line-height:0px;"></div>
<div style="height:5px;width:5px;border:1px solid black;"><!-- --></div>

P.S. Please break your lines at about 72 characters.
Previous Message
Next Message

Message thread: