underlining, colors, and visited links (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

puiwaihin -> underlining, colors, and visited links (12/30/2003 18:41:28)

I apologize if this is an issue that has been pounded to death. After looking through posts from the last 3 months and searching the past 6 I didn't find anything relevant though.

Here's my problem: It seems that the "visited" links overrides the hover and standard link designation. So if I want to make my links blue and have no text decoration but when hovered be underlined and red, the look gets ruined once the link is visited.

If I specify a particular color for visited links that color overrides the hover color. If I don't specify the text-decoration I can make the links go from underlined to not underlined, and if I don't specify a color I can make it change colors.

The only thing that works is specifying the visited links in the stylesheet, but not specifying text-decoration or font-color.

Is there anyway to maintain the visited links distinction and still have the hover effect?

Oh, and NN and IE don't handle these the same way. Grr.



c1sissy -> RE: underlining, colors, and visited links (12/30/2003 18:53:14)

quote:

ORIGINAL: puiwaihin

I apologize if this is an issue that has been pounded to death. After looking through posts from the last 3 months and searching the past 6 I didn't find anything relevant though.

Here's my problem: It seems that the "visited" links overrides the hover and standard link designation. So if I want to make my links blue and have no text decoration but when hovered be underlined and red, the look gets ruined once the link is visited.

If I specify a particular color for visited links that color overrides the hover color. If I don't specify the text-decoration I can make the links go from underlined to not underlined, and if I don't specify a color I can make it change colors.

The only thing that works is specifying the visited links in the stylesheet, but not specifying text-decoration or font-color.

Is there anyway to maintain the visited links distinction and still have the hover effect?

Oh, and NN and IE don't handle these the same way. Grr.


I believe if remembering correctly that this is an issue with NN. It should work in IE, but from what I remeber not in NN. Of course I stand to be corrected if wrong here. If time permits I'll look up some information for you and post a link or two for you.



puiwaihin -> RE: underlining, colors, and visited links (12/30/2003 19:10:49)

Here's a page I created to illustrate my point:
http://asiane.byu.edu/csstest.htm



c1sissy -> RE: underlining, colors, and visited links (12/30/2003 19:15:07)

quote:

ORIGINAL: puiwaihin

Here's a page I created to illustrate my point:
http://asiane.byu.edu/csstest.htm


In IE 6 they do what they are supposed to do.

Is the problem with NN?

<edit>The only one that didn't work was
Normal: No Underline/Blue Hover: Underline/Red Visited: No Underline/Red</edit>

second <edit>
check this out and see if it helps you out any
http://www.websitetips.com/css/index.shtml#links
</edit>
Check the top of the page as the link isn't taking it to the right spot

and another link for you to check out
http://hotwired.lycos.com/webmonkey/99/28/index0a.html?tw=authoring

here is another thing that might help you out,
A:link
This applies what you've done to all unvisited links
A:visited
This applies what you've done to all visited links
A:active
This applies what you've done to all links when they're active (while the user is clicking them)
A:hover
This applies what you've done to links when the user is "hovering" over them (it works similarly to how a rollover works with an image). This one doesn't work in Netscape!

this information taken from here.



puiwaihin -> RE: underlining, colors, and visited links (12/31/2003 13:46:58)

quote:

ORIGINAL: c1sissy

In IE 6 they do what they are supposed to do.

Is the problem with NN?


Actually, the description I had on the page was not stating what they are supposed to do, but rather what it is actually doing. I've updated the page so that what I think should happen and what actually happens is clearly stated.

In IE, the problem is that a:visited overrides everything, including hover. In my opinion hover should override everything. When you put your mouse over the link you want the look to change. But once you visit the link it no longer hovers at all. It just shows up as visited.

The only way to avoid this is to specify a:visited in such a way that it doesn't change the color and/or the underlining. If you don't specify a:visited at all then the default color overrides the CSS and uses the browser default. But then you lose all or some of the marking functionality of visited links.

In NN it seems that a:visited is not supported at all. You have to use a non-CSS tag in each individual page to change the visited link color (which would override the colors in IE, which is what the dynamic code was for in that article you mentioned). This means that a:hover works fine as long as you don't specify a visited link color in the <font> tag, but then visited links are not differentiated at all.

Personally, I think there should be one more link specification-- a:visited-hover which would override everything else. But as it is, there is no such thing. So, I was hoping there was some sort of work-around that would let me have my visiteds and hover too.



c1sissy -> RE: underlining, colors, and visited links (1/1/2004 3:51:10)

Hi puiwaihin, I sent you a pm, I hope that it helps you out!



skip -> RE: underlining, colors, and visited links (1/2/2004 17:48:42)

quote:

In IE, the problem is that a:visited overrides everything, including hover. In my opinion hover should override everything. When you put your mouse over the link you want the look to change. But once you visit the link it no longer hovers at all. It just shows up as visited.


when you create your css, a:hover needs to follow a:visited to work correctly

they need to be kept in order

a:link
a:visited
a:hover
a:active

as shown here



puiwaihin -> RE: underlining, colors, and visited links (1/7/2004 17:25:43)

Thanks, Skip.

I just found this out independently after posting in a thread where Giomanach posted CSS for it. Instead of testing it out, I just said that it wouldn't work. Only after he replied that he would did I look and see that the ordering was different.

Should of checked the CSS forum before the other one and learned this the easy way instead of the hard way [8D].



c1sissy -> RE: underlining, colors, and visited links (1/7/2004 19:11:45)

quote:

when you create your css, a:hover needs to follow a:visited to work correctly

they need to be kept in order

a:link
a:visited
a:hover
a:active


I knew this, but it didn't click in when you were posting your question[:@]

Sorry I wasn't more of a help to you.



puiwaihin -> RE: underlining, colors, and visited links (1/7/2004 23:47:58)

Don't worry. It's like a misplaced semicolon. We all know what it should be, but when the beginner asks what's wrong it's an easy thing to miss.

Thanks for giving the references you did.



gorilla -> RE: underlining, colors, and visited links (1/8/2004 15:13:23)

Just a few points:

An anchor has five states.

It is important that the pseudo classes are defined in the right order:
link, visited, hover, active, focus

You can specify different styles for each state.
Focus is used for accessibility - it's where a link has been selected by keyaboard but not yet activated.

quote:

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).


http://www.w3.org/TR/REC-CSS2/selector.html

Mhaircaish



c1sissy -> RE: underlining, colors, and visited links (1/8/2004 17:20:27)

quote:

ORIGINAL: puiwaihin

Don't worry. It's like a misplaced semicolon. We all know what it should be, but when the beginner asks what's wrong it's an easy thing to miss.

Thanks for giving the references you did.


It is also a beginner helping a beginner that was part of the problem.

So much to learn yet [&o]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375