HI! I'm hoping someone can help me with this. The CSS on this page works perfectly in IE but in firefox it doesn't work at all, it functions as a link but the properties I set for it via hover, link, active and visited do not show up! Any help would be appreciated!
I am using Dreamweaver MX, Firefox 2.0.0.18, and IE 7.0.5730.13. I have run the code through a validator and it came back as fine. So I'm at a loss.
Link here: http://www.coalitionranch.webs.com/coalmain.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
BODY { background: url(http://i198.photobucket.com/albums/aa293/bigmadmartian20052005/coalitionlayout_03.gif) fixed}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
text-decoration: underline overline;
color: #FFFFFF;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
}
a:visited {
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #CCCCCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
-->
</STYLE>
</head>
<BODY BGCOLOR=#000000 text="FFFFFF" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<a href="test.html">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit.
Vivamus purus. Sed viverra nisi ac nibh. Vivamus ullamcorper accumsan orci. Integer
congue feugiat ligula. Morbi consectetur nulla a turpis. Duis ornare arcu. Nam
ut massa in est lobortis varius. Nunc a nisl vitae risus dapibus lacinia. Nulla
neque. Quisque sagittis, elit at pellentesque scelerisque, nisl quam pharetra
lorem, ac ultrices mi erat a risus. Ut sit amet sapien. Pellentesque adipiscing
luctus purus. Fusce gravida tristique metus. Sed sit amet lorem. Vivamus at est.
Integer metus urna, pretium et, sodales sagittis, mattis et, lectus. Fusce rutrum,
quam at luctus ultricies, nisl urna porttitor nisl, vel interdum arcu eros a elit.
Sed volutpat. Sed ut nibh condimentum enim aliquet vulputate. Mauris fringilla
quam in enim.
</body>
</html>
Full Version: CSS link help
Can you provide the URL (address) of a document that demonstrates the problem?
http://www.coalitionranch.webs.com/coalmain.html That's it the first text is set as a link. I posted it with the code in the first one.
It looks like a:visited is working fine.
But a:hover doesn't work because it has the same specificity as a:link and a:visited, but those come later in the style sheet.
If you put a:hover after the other two, then it can override them.
BTW, changing the size of the font on hover can create nasty side effects as the page content shifts around.
But a:hover doesn't work because it has the same specificity as a:link and a:visited, but those come later in the style sheet.
If you put a:hover after the other two, then it can override them.
BTW, changing the size of the font on hover can create nasty side effects as the page content shifts around.
As a rule of thumb, use "LoVe HAte" (a:link, a:visited, a:hover, a:active) as a reminder of the order in which the link pseudo-classes are best coded.
See also Eric Meyer on Link Specificity.
See also Eric Meyer on Link Specificity.
QUOTE(Darin McGrew @ Dec 6 2008, 04:36 AM) 
It looks like a:visited is working fine.
But a:hover doesn't work because it has the same specificity as a:link and a:visited, but those come later in the style sheet.
If you put a:hover after the other two, then it can override them.
BTW, changing the size of the font on hover can create nasty side effects as the page content shifts around.
AH HA! Thank you very much! I warned the person I did it for of the font size change affects on the page, however they insisted upon it.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.