• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 567
  • Last Modified:

Combining a:link a:visited a:hover within a style

Hi all,

This style is not working and I'm sure you can tell me why :)

It's the a:link a:visited a:hover portion.  And it needs to be compatible in both IE and Firefox.

.style3 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #FFFF00;
      font-size: 12px;
      font-style: normal;
      font-variant: normal;
a:link { color:  #FFFF00;; }
a:visited { color:  #FFFF00;; }
a:hover { color:  #FFFF00;; }
}

Thanks

Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 4
  • 3
2 Solutions
 
ResQTek NancyPresident @ ResQTekCommented:
This is what I would try:

.style3 {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     color: #FFFF00;
     font-size: 12px;
     font-style: normal;
     font-variant: normal;

     a:link, a:visited, a:hover { color: #FFFF00; }
}

What is the problem you are encountering?
0
 
Rowby GorenAuthor Commented:
Hi Nancy,

Thanks for helping.

Can't figure out the problem. Here's the page with your style:

http://rowby.com/shows/20051116.html

I want the links to be yellow font with no underline, including hovered, and visited, etc.

Here's the existing style in the header:
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style3 {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     color: #FFFF00;
     font-size: 12px;
     font-style: normal;
     font-variant: normal;
     a:link, a:visited, a:hover { color: #FFFF00; }
}

body {
      background-color: #0000FF;
}

-->
</style>

0
 
ResQTek NancyPresident @ ResQTekCommented:
Sorry, I meant to draft it this way...

<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style3 {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     color: #FFFF00;
     font-size: 12px;
     font-style: normal;
     font-variant: normal;
}

a.style3:link, a.style3:visited, a.style3:hover {
color: #FFFF00;
text-decoration: none;
}

body {
     background-color: #0000FF;
}

-->
</style>

<body>

<p>testing text and <a class="style3" href="#">link</a></p>

</body>

Also, you'll need to specify the class in each anchor tag to match the style on the anchor elements unless the whole page is using the same skin.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Rowby GorenAuthor Commented:
Hi Nancy,

ALmost there:
http://rowby.com/shows/20051116.html

The other text in style3 also needs to be yellow like the linked text.

Right now it's black.

Rowby
0
 
ResQTek NancyPresident @ ResQTekCommented:
Yes, you need to specify the class "style3" within every element that needs it.

<p class="style3">Testing text and <a class="style3" href="#">link</a></p>
0
 
smaccariCommented:
You can also define this like this, so as no need to add a style3 class name in your anchors: (only in their container)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The Rowby Fan Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style3 {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     color: #FFFF00;
     font-size: 12px;
     font-style: normal;
     font-variant: normal;
}

.style3 a:link, .style3 a:visited, .style3 a:hover {
color: #FFFF00;
text-decoration: none;
}

body {
     background-color: #0000FF;
}

-->
</style>

<body>

<p class="style3">testing text and <a href="#">link</a></p>

</body>
</html>
0
 
ResQTek NancyPresident @ ResQTekCommented:
Oooo, I like that!
0
 
Rowby GorenAuthor Commented:
Thanks smaccari and Nancy2k5

For your help  It's working fine now.  Text and link!

http://rowby.com/shows/20051116.html
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now