CODEWITHSUNDEEP
htmlcssinternet-explorer
Jon Kruger
Jon Kruger

Reputation: 4069

Internet Explorer ignores really small heights set in CSS

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?

Upvotes: 2

Views: 1521

Answers (7)

Arve Systad
Arve Systad

Reputation: 5479

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

Upvotes: 0

Luke Woodward
Luke Woodward

Reputation: 64959

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.

Upvotes: 1

TJ L
TJ L

Reputation: 24462

Wouldn't this work better and be more semantic?

<hr />

.

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

Upvotes: 4

X-Istence
X-Istence

Reputation: 16667

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.

Upvotes: 0

mbillard
mbillard

Reputation: 38842

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;
}

Upvotes: 3

Shog9
Shog9

Reputation: 159618

Also set the font-size style:

font-size: 1px;

Upvotes: 1

Jon Kruger
Jon Kruger

Reputation: 4069

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

Upvotes: 5

Related Questions