DIV border color (4x defined) being overridden by body,html?

[JAB Creations]

The border color of a single DIV (unlike the dozens of others) is being overridden by the body,html selectors in my css on one of my works. It *JUST* started doing this and I have no idea of why another selector would overwrite another ESPESCIALLY when that selector is well or better defined in that manner.

body, html {
background: #005;
color: #ede;
height: 100%;
font-size: 12px;
}
div.menu1c {
border-color: #f00 #f00 #f0a35d #f00;
border: solid 2px;
height: 19px;
position: absolute;
text-align: center;
top: 90px;
width: 85px;
z-index: 2;
}

[createErrorMsg]

border color of a single DIV (unlike the dozens of others) is being overridden by the body,html selectors

The posted body and html styles do not contain a border or border-color property, so the style which is interfering with div.menu1c must be coming from somewhere else.

If it really is a question of one style overriding another, things to look for include:

1) An ID trumps a CLASS, as id is 10 times more specific than a class name.

2) An inline style trumps everything else, as an inline style gets an ID's worth of specificity and is then considered last in the order of presentation (meaning it beats an ID of equal specificity [w3.org]).

3) And, of course, any selector which matches to the same element and has a specificity identical to the one you posted but comes LATER in the source code than the above selector, will win.

If you have the Web Developer toolbar for Firefox, a quick way to see what selectors and styles are being matched to an element is to select "View Style Information" from the CSS tab, point the crosshair at the element in question (the status bar will show you a break down of exactly what's in the crosshairs), and click. The resulting page will list all the style properties and their selectors which currently match to the element.

[iamlost]

The problem is the order of your attribute property declarations:

border-color: #f00 #f00 #f0a35d #f00;
border: solid 2px;

The shorthand border: implies no border color at all so browser will provide some default value.

Switch their order:

border: solid 2px;
border-color: #f00 #f00 #f0a35d #f00;

and it appears as you intend.

When using such shorthand as border: I like to code as follows to avoid such inatvertant trumping of values:

border: #f00 solid 2px;
border-bottom-color: #f0a35d;