CSS borders ok in IE but not in Firefox?

[cgchris99]

I have the following CSS declaration...
#rightproducts {
position:absolute;
width:190px;
top:102px;
right:10px;
border:1px solid black;
background-color:#fff;
padding:5px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* Again, "be nice to Opera 5". */
body>#rightproducts {width:168px;}

#rightproducts h2{
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
border-style: none none solid none;
border-bottom:2px;
border: #8A0000;
}

Then when I do the following...
<div id="rightproducts">
<h2>** Editing Menu **</h2>
<p>

The Line ** Editing Menu ** should have a dark red border underline on it. This displays perfectly in IE but not in Firefox.

Anyone know why and/or how to fix it?

Thanks

[swa66]

In general try to revert your process: develop in anything but IE.
Make it work in the standards compliant browsers, next fix the IE issues in the different versions of IE with conditional comments

Hacks: I'd be extremely careful, and avoid them (alsmost at all cost), this relies on bugs in browsers, bugs that their makers *should* be fixed by their makers. (I've a big gripe with MSFT due to their insistence of not fixing well known bugs)

Doing those two will make your life a lot easier.

Now back to the problem with firefox...

Firefox interprets your definition of borders on the h2 as

h2 {
 border-top-width: medium;
 border-right-width: medium;
 border-bottom-width: medium;
 border-left-width: medium;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 border-top-color: #8a0000;
 border-right-color: #8a0000;
 border-bottom-color: #8a0000;
 border-left-color: #8a0000;
}

Seems your "border: #8a0000" reset the other values of the borders to their default. [I use the webmaster toolbar to see what the browser keeps of the CSS one hands to it, it's a plugin]

I'm seeing text in the standard ( [w3.org...] ) that says that the shorthand "border:" cannot be used to set different properties on the 4 borders, and hence order is important.
I tried to change the order, but it seems your border-bottom" with just the width of the border also overrides the color if you set it earlier.
You could use border-bottom-width, border-bottom-style, and border-bottom-color separately, or ...

I'd replace it all with a single line:

border-bottom: 2px solid #8A0000

But keep in mind the first few points, you're fighting an uphill battle if you try to develop in IE and use hacks.