Internet Explorer ignores really small heights set in CSS

Question

I have CSS that looks like this...

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
}

... and then I'm applying that style to a DIV element:

<div class="ColorSeparatorArea"></div>

It works fine in non-IE browsers, but in IE, it sets the height of the div to the height of one line of text and it won't let me go any smaller. Anyone know how to get around this problem?

Answer 1

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    overflow: hidden;
}

Answer 2

Also set the font-size style:

font-size: 1px;

Answer 3

You need to specify the line-height if the height is lower than the default line-height.

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    line-height: 1px;
}

Answer 4

Depending on the version of Internet Explorer, it will use height as if it is min-height and grow the box however big it feels like growing the box.

Answer 5

Wouldn't this work better and be more semantic?

<hr />

.

hr
{
    border: 1px solid #3d3d77;
}

Answer 6

I remember having a similar problem with spacing/separator <div>s in IE. I found this page which helped me. The solution I used was to put an empty comment in the <div>, i.e.

<div class="ColorSeparatorArea"><!-- --></div>

It seems an odd thing to do, but it works.

Answer 7

Stick a non breaking space (& nbsp;) into that div, set the font-size (and possibly line-height) to 1px and it should be fine.