inline style overuled by external sheet

[Jackie SENSE]

I have an included page(a navigation menu), which when viewed in a browser on its own, shows my links and hover text in white and yellow correctly. I used an internal style sheet in the head tags.
When I view this page through a page that it is included in, the links revert to the external stylesheet, blue & red. I have placed the following inline code hoping it would force the include to use it - but no joy.
the link is here: http://www.sensibleweb.co.uk/test/asi/

The inline code is here:
<td align="right" valign="top" width="20%" style="
a:link color: #FFFFFF; text-decoration: none;
a:visited color: #FFFFFF; text-decoration: none;
a:hover color: #FFCC33; text-decoration: none;
a:active color: #FFFFFF; text-decoration: none"
>
<!--webbot bot="Include" U-Include="includes/menu.htm" TAG="BODY" --></td>

Can any one correct me please?

[QuietDean]

Hiya Jackie.

inline styles are designed to apply more for the element they are placed in. Combine that with using :hover (pseudo classes) then you are going to get unpredictable results.

If I was you, I would give the td tag a classname (eg linktd) and setup the styles above it like this -

td.linktd a {
color: white;
}
td.linktd a:hover {
whatever;
}

This should work fine.

[Jackie SENSE]

Thanks Dean

Sorry for being thick I have read about classnames but am a bit confused. Are you able to expand on your answer please?

[QuietDean]

No worries.

Actually, I wrote a tutorial on how classes work , heres an exerpt -

Any rules beginning with a full-stop, (.), denote them as applying to a class, so that anything you put CLASS="little" in with its tag would have the .little rule applied to it.

to expand, rule

 .little {
color: red;
}

Would mean all classes "little" would have a red font.

id's are similar, but should be unique and are accessed with #little instead.

[Jackie SENSE]

Thanks Dean
Another kind person provided some help along the same recommendations as yourself and it works like you said. I will place it below in case it helps anyone else:

The <a class="menu" ... goes with every link in your menu, so you would have
Code:

<a class="menu" href="asi_conferences.htm">...
<a class="menu" href="commercial_communications.htm">...
<a class="menu" href="about_us.htm">...


And any others I've missed.
Then because they have been assigned to a class, the menu links will get the style from the menu class in your style sheet.
Just add Code:

a.menu:link{ color: #FFFFFF; text-decoration: none;}
a.menu:visited {color: #FFFFFF; text-decoration: none;}
a.menu:hover {color: #FFCC33; text-decoration: none;}
a.menu:active {color: #FFFFFF; text-decoration: none;}

to your external style sheet. It will only affect the links of class menu.
If you have a few minutes spare you could go through and remove all the font tags then restyle it using CSS

Tony

[QuietDean]

Good stuff. Glad you got it working.