IE won't let me make my div height small enough

[partha]

I have:

<div id="Gutter"></div>

#Gutter {
background-color: silver;
height: 2px;
}

---------
Looks right in Opera, but in IE6, its height is about 1em. I can make it have a height *larger* than 1em, but any value smaller always shows up as 1em.

[iamlost]

IE thinks minimum height is your font-size (1em).
Just add font-size: 0; to your #Gutter styling.

Is there a reason you are not using a styled <hr>?

[Setek]

Or stick overflow: hidden; on.

And yeah, hr? :)

[bedlam]

Is there a reason you are not using a styled <hr>?

I'd guess it's because, as pointed out in an article by Marek Sovavsiti, it's not easy to style <hr /> elements consistently [sovavsiti.cz] cross-browser. Sovavsiti's article concludes that the best overall method is to encase a hidden <hr /> in a styled <div>.

I've often done this (though I have to admit, I think the div-wrapped hr method is probably better):

CSS:
==========

hr { display:none; /* Hide the <hr />. It will show if the document is rendered unstyled... */ }
.hr { border-bottom:2px solid #ccc;padding-bottom:1em; /* Create a class that simulates the look you want for your <hr /> elements */ }

HTML:
==========

<h1>Lorem ipsum</p>
<p class="hr">Nullam semper aliquet mauris. Aenean ultricies, augue quis tincidunt vulputate, orci massa suscipit ligula, a consectetuer mi elit at libero.</p>

<hr />

<h2>Ut sagittis wisi adipiscing</h2>
<p>Ut sagittis wisi adipiscing nibh. Sed egestas mollis magna. Suspendisse eu sem sed mauris facilisis tempus.</p>

This way degrades perfectly, adds virtually no excess markup, and enables you to style your <hr />s almost any way you want. For full control of styling, you'll probably want to use the other method...

-B