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?