weired IE6 problem - am I cracking up?

lookitsjonno · 14 Aug 2008 at 11:35

I've broken my bug down into it's simplest form below, can anyone tell me why the green line in my browser is about 10px in height and not 1px as defined in the css?

I've never seen anything like this before, so perhaps it's a bug with my browser?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Testing</title>

<style>
div.topCurl {
background: green;
height: 1px;
}
</style>

</head>

<body>

	<div class="topCurl"></div>
	
</body>
</html>

GravyMonster · 14 Aug 2008 at 11:43

I've had a similar problem before. The problem I found was that IE likes to put a non breaking space inside empty elements at the default font size which pads the element out.

If you add font-size: 1px; to your CSS it should help the problem. I don't know if any one else has a better solution though.

*edit*
Testing that here, IE6 still leaves you with a 2px line, instead of 1px.

lookitsjonno · 14 Aug 2008 at 11:46

bah bloody IE, I can live with 1px extra i think!

can't beleive I didn't know this one, mind you i've always found alternatives to using 1px divs!

thanks.

kinneh · 14 Aug 2008 at 12:04

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Testing</title>

<style>
div.topCurl {
background: green;
line-height: 1px;
max-height: 1px;
}
</style>

</head>

<body>

<div class="topCurl">&nbsp;</div>
	
</body>
</html>

GravyMonster · 14 Aug 2008 at 12:10

Aha! max-height and min-height. Learn something new everyday.

cheers kinneh

lookitsjonno · 14 Aug 2008 at 12:21

kinneh said:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Testing</title>

<style>
div.topCurl {
background: green;
line-height: 1px;
max-height: 1px;
}
</style>

</head>

<body>

<div class="topCurl">&nbsp;</div>
	
</body>
</html>

doesn't work here, but font-size: 0px; does.

not sure as IE6 supports min-height properly does it?

Inquisitor · 14 Aug 2008 at 12:23

jonno.co.uk said:
doesn't work here, but font-size: 0px; does.

not sure as IE6 supports min-height properly does it?

No, it doesn't. You can use this rather neat hack though:

Code:

selector
{
	min-height: 100px;
	height: auto !important;
	height: 100px;
}

kinneh · 14 Aug 2008 at 13:23

jonno.co.uk said:
doesn't work here, but font-size: 0px; does.

not sure as IE6 supports min-height properly does it?

Strange. It was working in my IE6.

Are you inserting a   in the div?

lookitsjonno · 14 Aug 2008 at 13:32

kinneh said:
Strange. It was working in my IE6.

Are you inserting a   in the div?

yes