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

Question

Hi

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.

Answer 3

I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?

line-height: 1px;

Answer 4

I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:

hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }

(adjust to suit)