Randomly different colored roll over links?

I have roll over links and each randomly seems to be either white or blue

[kopertone1]

I want two different link colors on my website. As of now, I have two, but I have no idea how to choose one or the other. Some links are blue, while some are white. There is no pattern in the html that would show how a link is deciding what color it wants to be. The only links I want to be white are on my top menu, while I want the rest to be blue.

I have been trying to get away from tables since that is all i normally use so I am new to CSS but I want to figure it out.

Thanks

[edited by: SuzyUK at 4:32 pm (utc) on Mar. 1, 2008]
[edit reason] No personal URI's per Charter, thanks [/edit]

[SuzyUK]

Hi kopertone1 and Welcome to WebmasterWorld!

could you please post your CSS for the links in the order they are in the stylesheet

it's the bits that will have something like:
a:link, a:visited, a:hover, a:active, a:focus in them (there may be more to them than that)

you could be seeing different colors depending on the order of these or whether the affected links on your page have been visited by you

also if you can post the HTML for your top links so we see if there's any IDentifying elements around them which will help target them separately

thanks
-Suzy

[kopertone1]

Here is my stylesheet

- -- - - - - - --- - - - - - -

}
a:hover.piclink {
border-style: none;
}
a:hover {
color: #B2DAFC;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #B2DAFC;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #B2DAFC;
text-decoration: none;
}
a:active {
color:

Heres the Menu which I want to be white until rolled over i want it to be the baby blue

- - - - - - - - - - - - -

<td width="667" valign="top" class="menu_placement"><table width="667" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="43" height="29"><img src="images/spacer.gif" width="43" height="18" /></td>
<td width="120" class="menu_text">Home</td>
<td width="126" class="menu_text">About</td>
<td width="120" class="menu_text"><a href="javascript:showPage('portfolio_1')">Portfolio</a></td>
<td width="120" class="menu_text">Resume</td>
<td width="106" class="menu_text"><a href="http://www.google.com" rel="lyteframe" title="Search Google"
rev="width: 500px; height: 400px; scrolling: no;">Contact</a></td>

These example body links i would like to start baby blue and go to a different color (white maybe, dunno yet)

- - - - - - - - - - - - - -

<td width="78%" class="visit_enlarge"><div align="right"><a href="http://www.parksideprovidence.com/" target="_blank">Visit</a></div></td>
<td width="22%" class="visit_enlarge"><div align="right"><a href="assets/island_deli_lg.jpg" rel="lytebox">Enlarge</a></div></td>
</tr>
</table>

So is it possible to have two different roll over color links for different parts of the page and can they have dotted under lines?

Thanks for the help!

[luispunchy]

Hi kopertone1 – well, where to start? :)

Maybe this was oversight on your part, simply missed some lines of code in a copy/paste when you added the snippets above - but as included there are a number of errors. Some of the CSS is malformed; the last declaration isn't closed which will cause problems. The HTML is also looking a bit butchered :( – e.g. tags aren't closed properly / are nested improperly, some of your “links” in your menu aren’t actually links as they are not contained in anchors... all of these errors are likely why you aren’t seeing what you expect.

So I’ll answer in general terms which hopefully you can apply to your code. First of all, make sure your markup and CSS are complete and validate. Can’t stress that enough.

As Suzy mentioned, you also need to use the correct order when applying your link pseudo-classes – which should be a:link, a:visited, a:hover, a:active – otherwise certain states won’t work.

You can target specific links to give them unique styles – for example you can use your “"menu_text" class to target your menu links. To wit:

td.menu_text a:link, td.menu_text a:visited {
color:#b2dafc;
text-decoration:none;
}
td.menu_text a:hover, td.menu_text a:active {
color:#faa;
border-bottom:1px dotted #faa;
}

Target another set of links with a different CSS selector – e.g. use your “visit_enlarge” class in place of “menu_text”.

There are *vast* improvements that could be made to your code implementation, but I’ll just part with this encouragement: definitely get away from table-based layout in favor of semantic markup and CSS. Search these forums for tips :)