How to get a div less than 20px height IE6

cyberseed · #1 (**permalink**) Jul 3rd, 2007, 12:13

Hi I have just noticed that IE6 has a weird default that does not allow you to have a div with a height less than 20px even if you specify it to be 1px. In FF the code is displayed correctly. I tried setting the margins to 0 but this did not work. As there is no content in the div I am a little puzzled. Any help Yes please

css:

Code: Select all

#container {
 height: 30px;
}
#top {
 background-color: #0099FF;
 height: 1px;
}
#bottom {
 background-color: #999999;
 height: 29px;
}

html:

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="top"></div>
  <div id="bottom"></div>
</div>
</body>
</html>

pa007 · #2 (**permalink**) Jul 3rd, 2007, 12:21

Did you try to reset the padding as well?

Code: Select all

* {margin:0; padding: 0;}

That will set all margins and paddings to 0 which may work.

May I ask why you are using a 1px high div. It looks like you are doing it to get a 1px thick line. Why not just use a

Code: Select all

border-top: 1px solid #0099FF;

This will give you a solid 1px line at the top of whatever element you apply it to.

Have you got a screen dump of, or link to, the site or a mock-up? What exactly are you trying to achieve here?

Pete.

delusion · #3 (**permalink**) Jul 3rd, 2007, 12:44

Try this in the <head> of your html:

Code: Select all

<!--[if IE]>
<style type="text/css"> 

#top {
 height: -20px;    }

</style>
<![endif]-->

It's called a conditional.. I hope I understood the problem correct and this solves the problem..

cyberseed · #4 (**permalink**) Jul 3rd, 2007, 13:38

Quote:

Originally Posted by delusion

Try this in the <head> of your html:

Code: Select all

<!--[if IE]>
<style type="text/css"> 
 
#top {
 height: -20px;    }
 
</style>
<![endif]-->

It's called a conditional.. I hope I understood the problem correct and this solves the problem..

Thanks delusion yes you understood the problem but it did not work. I found a work around but I am curious about why it happens so if anyone knows??

pa007 · #5 (**permalink**) Jul 3rd, 2007, 13:40

Could you psot your solution incase anyone else has the same problem?

Sorry I haven't a clue why this happens.

Pete.

cyberseed · #6 (**permalink**) Jul 3rd, 2007, 13:49

Quote:

Originally Posted by pa007

Did you try to reset the padding as well?

Code: Select all

* {margin:0; padding: 0;}

That will set all margins and paddings to 0 which may work.

May I ask why you are using a 1px high div. It looks like you are doing it to get a 1px thick line. Why not just use a

Code: Select all

border-top: 1px solid #0099FF;

This will give you a solid 1px line at the top of whatever element you apply it to.

Have you got a screen dump of, or link to, the site or a mock-up? What exactly are you trying to achieve here?

Pete.

Ta paa007
Its not a margin or pading problem. Yes you are right about the line thing. What I wanted was a dashed line which I made like this:

Code: Select all

#top {
 border-top-width: 1px;
 border-top-style: dashed;
 border-top-color: #CCCCCC;
}

but I noticed when you specify the height of the div it gives you 20px in IE6. If you take off the height it does seem to work!! The other way is to but the dash as a background image which is what I normanly do.

cyberseed · #7 (**permalink**) Jul 3rd, 2007, 13:56

Quote:

Originally Posted by pa007

Could you psot your solution incase anyone else has the same problem?

Sorry I haven't a clue why this happens.

Pete.

One way is not to specify the height:

Code: Select all

#top {
 border-top-width: 1px;
 border-top-style: dashed;
 border-top-color: #CCCCCC;
}

The other is to use a background image but it does not really solve the general problem it only fixs what I need to achieve.

Code: Select all

#top {
 height: 20px;
 padding-top: 7px;
 text-align: center;
 margin-top: 35px;
 background-image: url(../shared-images/dashed_line.gif);
 background-repeat: repeat-x;
}

Any thoughts, yes please

pa007 · #8 (**permalink**) Jul 3rd, 2007, 14:25

It's odd, it must be one of IE's quirks and lets face there are a few. IE7 is ok but you're often fighting a losing battle with IE6.

Glad you found a solution, I'll bear it in mind in future.

By the way, you should get into the habit of writing your css shorthand. So you have:

Code: Select all

#top {
 border-top-width: 1px;
 border-top-style: dashed;
 border-top-color: #CCCCCC;
}

This could be:

Code: Select all

border-top: 1px dashed #ccc;

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
100% height	RZX Developer	Web Page Design	11	Mar 29th, 2008 10:23
CSS Div height problem	dryjoy	Web Page Design	1	Jan 6th, 2008 18:05
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
100% div height	jimz	JavaScript Forum	2	Mar 22nd, 2006 00:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to get a div less than 20px height IE6