getting hover properties onto a linked header!

[esllou]

here is my html

<A HREF="miscellaneous.shtml" style="text-decoration:underline"><H3>Miscellaneous</H3></A>

and here is my css

.content A H3{
font-size:1.4em;
}

.content A H3 a:hover{
color:blue;
text-decoration:none;
}

the first part is working fine but I can't get it to change color to straight blue when hovering with mouse. I know it's a question of order, but I think I have tried every permutation possible, for example:

.content A:hover H3{
color:blue;
text-decoration:none;
}

and others, no luck. What am i doing wrong?

[createErrorMsg]

<A HREF="miscellaneous.shtml" style="text-decoration:underline"><H3>Miscellaneous</H3></A>

The nesting you've used here is actually invalid. <A>nchors are inline elements. <Hx>eaders are block level elements. The W3 visual formatting model does not allow block level elements to be nested inside of inline elements. So you'll want to start by switching your source code to this...

<h3><a href="#">Miscellaneous</a></h3>

From there you want the CSS to look like this...

h3 a {
font-size:1.4em;
text-decoration:underline;
}
h3 a:hover{
color:blue;
text-decoration:none;
}

Even better would be...

h3 a:link {
font-size:1.4em;
text-decoration:underline;
}
h3 a:link:hover {
color:blue;
text-decoration:none;
}

cEM

PS: Just for the sake of knowing, this is the part of your original code that was preventing the :hover from working...

.content A H3 a:hover

Note that this attempts to style the :hover effect for an <a>nchor inside of an <h3> inside of an <a>nchor, which in your code is one <a>nchor too many.

[esllou]

ok, thanks for that. I am actually busying myself clearing up this type of non standard coding nonsense, so your tips will help me further.

thanks again.