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

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