HTML/CSS: One element, 1 pixel high, 100% wide, 0 images, single color, all browsers

Question

I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...

I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.

I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.

I tried the old classic which probably many of you know:

<div class="hr"></div>

<style ...>
.hr {
    height: 1px;
    background: red;
    width: 100%;
    font-size: 1px; /* IE 6 */
}
</style>

The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.

Any ideas?

Answer 1

just do

.hr {
  height: 0px;
  margin: 0px;
  border-bottom: 1px solid #FF0000;
  font-size: 1px;
}

I went through the same thing when I was new to CSS.

Answer 2

adding an overflow: hidden; style should fix it also.