SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: A tag problem
-
Nov 7, 2002, 17:15 #1
- Join Date
- Nov 2002
- Location
- Waco, TX
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A tag problem
Hello.. I'm new at this CSS thing and having trouble displaying my links the way I want to. I want the links to look just like the body text until hovered over, at which point I want the color to change and an underline to appear. Dreamweaver has gotten me to this point without a problem, but the issue arrives when dealing with visited links. I want visited links to look just like the unvisited links, but instead the visited links are following the settings for visited links even when I hover on them. When I tried just eliminating the settings for visited links, they reverted back to the default for vlink, that dark purple underlined, and still didn't follow the style for hover on subsequent clicks.
Here is the embedded style I'm using:
Code:<!-- a:hover { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline} a:link { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none} a:active { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline} a:visited { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none} body { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF} -->
I know there's got to be a very simple solution to this problem, as I've seen this done on about 4 million web pages. Thanks in advance for your help.
Blake
-
Nov 7, 2002, 20:27 #2
- Join Date
- Jun 2001
- Location
- Oklahoma
- Posts
- 3,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not positive, but you're missing a final ; on every line of the stylesheet. Try this:
Code:<!-- a:hover { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; } a:link { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; } a:active { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; } a:visited { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; } body { font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; } -->
-ColinColin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Nov 7, 2002, 20:53 #3
- Join Date
- Oct 2001
- Location
- Tucson, Arizona
- Posts
- 1,858
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The order for link pseudo-classes is link, visited, hover, active (LVHA). Try this:
Code:a:link, a:visited { background-color: transparent; color: #ff00ff; text-decoration: none; } a:hover, a:active { background-color: transparent; color: #66ff99; text-decoration: underline; } body { background-color: #ffffff; color: #ff00ff; font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; }
-
Nov 7, 2002, 20:55 #4
- Join Date
- Oct 2002
- Location
- Utah (USA)
- Posts
- 309
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Aye, the order you list them in in your style sheet gives them precedence over one another.
$slider = 'n00b';
-
Nov 7, 2002, 21:53 #5
- Join Date
- Nov 2002
- Location
- Waco, TX
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah... I see.
Thanks so much for the advice, it works just the way I want it to now!
Blake
Bookmarks