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.