Horizontal Line in IE6

[twalters84]

Greetings,

I am trying to create a horizontal line using CSS (without an image). The <hr> element is not really as thick as I want it. Thus, I am trying something like this:

div.hr
{
height: 2px;
background: #000000;
margin: 5px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}

This looks fine in IE7, Firefox, etc.

However, in IE6, the line looks like it is about 20 pixels in height.

Does anybody know the proper adjustment I need to make so IE6 will look more like IE7?

Thanks in advance!

Sincerely,
Travis Walters

[Xav]

Internet Explorer has always been bad at interpreting web pages. IE 7 and Firefox 2 are used by about 97% of users at the last count, so you should be OK.

[twalters84]

Hey there,

I am concerned about this problem.

Browser Statistics

According to the website above, during march 2008, 30.1% of the population is still using IE6.

If anybody has a solution, please feel free to share

Thanks again.

Sincerely,
Travis Walters

[twalters84]

Hello again,

Here is the solution:

"As for why this isn't working, it's because IE is saving enough room for text inside this div. Either set the text size to 1px or turn hide the overflow."

div.hr
{
height: 2px;
background: #000000;
margin: 5px 0px 5px 0px;
padding: 0px 0px 0px 0px;
font-size: 1px;
}

Maybe this will help somebody in the future. Thanks again.

Sincerely,
Travis Walters

[Xav]

Ah - maybe the div element isn't the best element to use. There's a website where you type in the site, and it displays it as it would appear within different browsers, at different resolutions. I forgot the name, but I'll post it if I remember.