Hi, All!
I'm trying to create stripes of a fixed height. All works well in NS and FF, but IE 6 won't render the stripes smaller than 18px. Is this a limitation I'm unaware of? Is there a work-around, or am I doing something wrong?
Thanks very much for your help!
Pat
<html>
<head>
<style>
<!--
#testStripe {
margin: 0;
padding: 0;
background-color: Lime;
height: 2px;
}
-->
</style>
</head>
<body>
<div id="testStripe"></div>
</body>
</html>I got it to work by adding a font-size to the style:
#testStripe {
margin: 0;
padding: 0;
background-color: Lime;
height: 2px;
font-size: 1px;
}By the way, it would probably be more semantically correct to simply used a styled HR element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
hr {
color: lime;
height: 2px;
margin: 0;
}
-->
</style>
</head>
<body>
<hr>
<p>paragraph</p>
<hr>
<p>paragraph</p>
<hr>
<p>paragraph</p>
<hr>
</body>
</html>Thank you very much for the fix! It's surprising that IE seems not to recognize heights smaller than 18px and that a hack is required to do the job. (Maybe I shouldn't be surprised at all.)
I agree with you about the <hr>. Actually, the purpose for the stripe is to house a repeating background image. That is why I chose a <div> rather than a <hr>. I just didn't want to complicate the core issue.
Thanks again!
PatIE wouldn't reduce the height is because the font size was taller than the DIV (as NogDog invertedly pointed out with his font-size fix). Internet Explorer-Win also treats the width and height properties as the min-width and min-height properties. IE-Win will stretch a box to fit the contents no matter what.overflow:hidden;Excellent! Thank you, Vic.
Pat
I'm trying to create stripes of a fixed height. All works well in NS and FF, but IE 6 won't render the stripes smaller than 18px. Is this a limitation I'm unaware of? Is there a work-around, or am I doing something wrong?
Thanks very much for your help!
Pat
<html>
<head>
<style>
<!--
#testStripe {
margin: 0;
padding: 0;
background-color: Lime;
height: 2px;
}
-->
</style>
</head>
<body>
<div id="testStripe"></div>
</body>
</html>I got it to work by adding a font-size to the style:
#testStripe {
margin: 0;
padding: 0;
background-color: Lime;
height: 2px;
font-size: 1px;
}By the way, it would probably be more semantically correct to simply used a styled HR element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
hr {
color: lime;
height: 2px;
margin: 0;
}
-->
</style>
</head>
<body>
<hr>
<p>paragraph</p>
<hr>
<p>paragraph</p>
<hr>
<p>paragraph</p>
<hr>
</body>
</html>Thank you very much for the fix! It's surprising that IE seems not to recognize heights smaller than 18px and that a hack is required to do the job. (Maybe I shouldn't be surprised at all.)
I agree with you about the <hr>. Actually, the purpose for the stripe is to house a repeating background image. That is why I chose a <div> rather than a <hr>. I just didn't want to complicate the core issue.
Thanks again!
PatIE wouldn't reduce the height is because the font size was taller than the DIV (as NogDog invertedly pointed out with his font-size fix). Internet Explorer-Win also treats the width and height properties as the min-width and min-height properties. IE-Win will stretch a box to fit the contents no matter what.overflow:hidden;Excellent! Thank you, Vic.
Pat