Get get ordrer right

[Bob Phillips]

Hi,

I have a web page that has div's, span's and anchors intermixed, and I can't
get the text on the initial div to react to mouse hover.

This is the structure of my HTML

<div id="leArchive">
<div id ="date" class="item">
<span class="docHead">some text here</span>
<a href="url"><img src="img.gif" />more text here>/a><br />
</div><br />
...
</div>

I want all of the text to be Verdana, bold, no text-decoration, and go to
firebrick colour when the mouse hovers over it.

I have got the anchor CSS working okay, its the right colour, position is
good, font okay, and it goes to firebrick on mouse hover.

However, the CSS on the span item is not so good. Colour, position, font is
okay, but it doesn't go to firebrick on mouse hover.

I have tried all sorts of combination of #leArchive, div, span, a, a:hover,
etc. etc to get it working, but it won't.

One thing I should mention is that I combine styles where they share
attributes, and have secondary items for their unique parts, e.g.
#leArchive .item, #leArchive .item a, #leArchive .item:hover {
font-weight: bold;
text-decoration: none;
}

#leArchive .item:hover {
color: firebrick;
}

Can someone explain to me how the priority of the CSS attributes and
pseudo-attributes work, and how I can resolve my problem?

TIA

Bob Phillips
... looking out across Poole Harbour to the Purbecks