Why does IE6 do this??

rockbeer · 05-12-2005 9:08pm #1

Can somebody please tell me - is this a bug in IE6?

http://www.siliconweb.ie/height/css_height.html

A quick look at the source will reveal the blue div should only be 1px high. This works fine in FF. Is it a known bug in IE? The minimum height it will seem to display a div like this seems to be about 18px...

Anybody got a workaround??

Source (could hardly be simpler - if IE can't do this right, can it be trusted to do anything??):

<html>
<head>
<title>test</title>
<style type="text/css">
#deco_bar {width: 100%; height: 1px; background: #000066;}
</style>
</head>

<body>

<div id="deco_bar"> </div>

</body>
</html>

cregser · 05-12-2005 9:18pm

Just for the heck of it. Try using class="deco_bar" instead of id="".

aidan_walsh · 05-12-2005 9:19pm

That won't work. The problem is because IE is rendering the space character at the full default font height. To fix it, set the font-size to 1px.

cregser · 05-12-2005 9:24pm

Ah Aidan, you're too fast

#deco_bar {width: 100%; height: 1px; background: #000066; font-size: 1px;}

rockbeer · 05-12-2005 9:24pm

aidan_walsh wrote:

To fix it, set the font-size to 1px.

Nice idea, thanks. It helped a bit... reduced it to about 14 px high :rolleyes:

[edit]Oh... and it's the same with or without the space character. An empty div behaves just the same.[/edit]

Goodshape · 05-12-2005 9:58pm

It's line-height you need to set, not font-size.

[html]
<style type="text/css">
#deco_bar {width: 100%; line-height : 1px; height: 1px; background: #000066;}
</style>
[/html]

aidan_walsh · 05-12-2005 10:00pm

Goodshape wrote:

It's line-height you need to set, not font-size.

[html]
<style type="text/css">
#deco_bar {width: 100%; line-height : 1px; height: 1px; background: #000066;}
</style>
[/html]

D'oh...

rockbeer · 06-12-2005 12:09am

Goodshape wrote:

It's line-height you need to set, not font-size.

That's sorted it. Nice one, thanks.

Bruce

Why does IE6 do this??

Comments