I was just wanting to clear up a problem that comes up quite often, when you specify a height on an empty DIV - say less than 15px - and the lunacy that is IEs CSS engine dictates it should be more than this 
.
So usually I put something like font-size:0px; in, but there is a variance in the different versions of IE and for the problem that I have at the moment, I need it to be pixel perfect.
So what is the difinitive technique to sort this bug out perfectly through IE5 to IE6?I do both "font-size: 0; line-height: 0;", plus I explicitly set "padding: 0" if that is appropriate.Cheers Nog Dog. Unfortunately I've already tried that combination:
#div {
margin:0;
padding:0;
height:8px;
background:url(/gfx/bg.gif) repeat-y 0% 0%;
font-size:0;
line-height:0;
}
and the results were:
IE6 = 8px
IE5.5 = 2px
IE5.01 = 22px
I mean really, what the hell is all that about? Don't know whether to get mad again or just laugh because there's no logic behind it.
Are there other methods for the earlier IE versions? I use a separate stylesheet for the other crap I'm forced to use to fix issues these pieces of junk throw up, so it wont conflict with the code the proper browsers see.Have you thought of using IE Conditional statements?
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/Yeah">http://www.quirksmode.org/css/Yeah</a><!-- m --> I used to use them but not anymore. I'm not sure how using them would help solve the problem though. I would still need the css code to make the empty div render properly in IE 5.Are you using a HTML 4.01 Strict doctype?XHTML 1.0 Strict and w3c valid. Why?It's fixed and sorry. In my previous mentioned ie5 only css file I had the div assigned with a height of 1% and had forgotten to take it out.
I found that all versions get the height correct with only font-size:0; and in this case it didn't need the line-height:0;
So I learnt that font-size:0; is the best method for correcting an empty div's height in IE and that I should check my code before posting a message and wasting people's time.
Glad you got it fixed.
I was asking about the doctype to make sure IE wasn't running in quirks mode. XHTML strict should do the job, too (and apparently does).
I find this is quite a neat method of fixing this:
div#mydiv {
height: 5px;
background: #369;
overflow: hidden;
}it is good practice when working with older browsers to set the font-size and line-height to 1px or 0px for selectors when the element's height is smaller than the inherited font-size or line-height
. So usually I put something like font-size:0px; in, but there is a variance in the different versions of IE and for the problem that I have at the moment, I need it to be pixel perfect.
So what is the difinitive technique to sort this bug out perfectly through IE5 to IE6?I do both "font-size: 0; line-height: 0;", plus I explicitly set "padding: 0" if that is appropriate.Cheers Nog Dog. Unfortunately I've already tried that combination:
#div {
margin:0;
padding:0;
height:8px;
background:url(/gfx/bg.gif) repeat-y 0% 0%;
font-size:0;
line-height:0;
}
and the results were:
IE6 = 8px
IE5.5 = 2px
IE5.01 = 22px
I mean really, what the hell is all that about? Don't know whether to get mad again or just laugh because there's no logic behind it.
Are there other methods for the earlier IE versions? I use a separate stylesheet for the other crap I'm forced to use to fix issues these pieces of junk throw up, so it wont conflict with the code the proper browsers see.Have you thought of using IE Conditional statements?
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/Yeah">http://www.quirksmode.org/css/Yeah</a><!-- m --> I used to use them but not anymore. I'm not sure how using them would help solve the problem though. I would still need the css code to make the empty div render properly in IE 5.Are you using a HTML 4.01 Strict doctype?XHTML 1.0 Strict and w3c valid. Why?It's fixed and sorry. In my previous mentioned ie5 only css file I had the div assigned with a height of 1% and had forgotten to take it out.
I found that all versions get the height correct with only font-size:0; and in this case it didn't need the line-height:0;
So I learnt that font-size:0; is the best method for correcting an empty div's height in IE and that I should check my code before posting a message and wasting people's time.
Glad you got it fixed.I was asking about the doctype to make sure IE wasn't running in quirks mode. XHTML strict should do the job, too (and apparently does).
I find this is quite a neat method of fixing this:div#mydiv {
height: 5px;
background: #369;
overflow: hidden;
}it is good practice when working with older browsers to set the font-size and line-height to 1px or 0px for selectors when the element's height is smaller than the inherited font-size or line-height