roll over doesn't work 1

[mrsbean]

for some strange reason, my roll over doesn't work on some of the links below ... works on most of them, but "Schedule & Results" and "Guestbook" don't change colors when the mouse rolls over them. I'm using CSS to accomplish the roll-over. Can anybody tell me what to fix? Thanks in advance

MrsBean

	<table bgcolor="#1c3f93" border="1" cellpadding=0 cellspacing =0  width="100%">
		<tr><td align="center">
		<!--nav table here -->
		<table cellpadding = "5" cellspacing = "5">
		<tr>
		<td><a href="index.cfm?template=news">News</a></td>
		<td><a href="index.cfm?template=biography">Biography</a></td>
		<td><a href="index.cfm?template=team">Team &amp; Car</a></td>		
		<td><a href="index.cfm?template=pa">Photo Gallery </a></td>		
		<td><a href="index.cfm?template=event">Schedule &amp; Results </a></td>		
		<td><a href="index.cfm?template=guestbook">Guestbook </a></td>		
		<td><a href="index.cfm?template=links">Links </a></td>
		<td><a href="index.cfm?template=contact">Contact </a></td>
		</tr>
		</table>		
		
				</td></tr></table>

A portion of my CSS follows:

a:current {
color: white;
font-weight: bold;
text-decoration: none;
}


a:hover {
color: white;
font-weight: bold;
text-decoration: none;
}

a:visited {
color: #FEB30F;
font-weight: 500;
text-decoration: none;
}

a {
color: #FEB30F;
font-weight: 500;
text-decoration: none;

}

 

[traingamer]

It looks ok, but you are giving us your cold fusion source. What does the final html look like? (That's what is sent to the browser.)

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[feherke]

Hi

Unknown pseudo-element or pseudo-class :current

http://jigsaw.w3.org/css-validator/

Put the bare [tt]a[/tt] first :

a {
  color: #FEB30F;
  font-weight: 500;
  text-decoration: none;
}

a:hover {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: #FEB30F;
  font-weight: 500;
  text-decoration: none;
}

Feherke.

http://rootshell.be/~feherke/

 

[traingamer]

Duh. Didn't pay attention. Order is important - remember mnemonic LoVe HAte for link order:

a:link{
color: #FEB30F;
font-weight: 500;
text-decoration: none;
}

a:visited {
color: #FEB30F;
font-weight: 500;
text-decoration: none;
}

a:hover {
color: white;
font-weight: bold;
text-decoration: none;
}

a:active{
color:red;
}



Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[BillyRayPreachersSon]

A good way of remembering the order of the pseudo-classes is:

LoVe HAte

Or:

Link
Visited
Hover
Active

so:

a {
   ...
}
a:link {
   ...
}
a:visited {
   ...
}
a:hover {
   ...
}
a:active {
   ...
}

You might also want to add an "a:focus" rule to the mix (an IE-only one, AFAIK) alongside the "a:active" rule.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Doh. Too slow!



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[mrsbean]

Thanks to all ... never knew that the order was important before.

MrsBean

 

[Vragabond]

Actually, :focus is a completely standard pseudo class supported by all the browsers. It should appear below :visited and above :hover and represents the state of link having focus. IE6 did not understand :focus pseudo class but it did treat :active the way :focus should be treated. Do not know how the situation is with IE7 though.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]