You are here

-Horizontal Rules IE vs FireFox-

I have been doing some contract work on a site that I have to make look right in FireFox, IE 7 and IE 6. That means a lot of CSS hacking. In the process I've learned some interesting facts that I'll be sharing. The first is the different ways that FF and IE handle Horizontal Rules .

If FireFox, by default, the border of the hr is displayed. In IE, it is the inside. So if you want a 1px hr, you have to use style it so that it displays right in both. In otherwords, you have to explicitly tell it what you want the border and backgrounds to look like. Below is what I ended up with:

hr {
border: none;
background-color: #c4c4c4;
color: #c4c4c4;
height: 1px;

The first line tells FF to not display a border (it will by default). The second line tells FF what color to make the line. The third tells IE. Notice they are the same color code. The last line says how high the line is. I had to spend a little time futzing to figure out why the line was thicker in FF than in IE, so I thought I'd share what I found in case someone else is having the same issue.