I use expression web to design my site. On FILE - Properties - Formatting, I select a colour for hovered hyperlinks. The style that is created is shown below. However it is only working if the link has never been visited. After the first visit the colour does not show any more upon hovering. Any ideas? .style75 { font-size: 8pt; } a:hover { color: #AE2836; } a:visited { color: #336CA3; }
That seems strange, that coding should work fine. what browser are you using? also, just incase, clear your browsers cache.
That seems strange, that coding should work fine. what browser are you using? also, just incase, clear your browsers cache.
The order you use for your rules is important. Each of the pseudo classes has equal weight, so the last one coded overrides the earlier ones. Since :visited follows :hover in the rules, once you visit the site, the :visited will control. Put your rules in this order: :link :visited :focus :hover :active cheers, gary
I tried in the following order. Nothing the same problem. It goes red (#AE2836) on hover, only if it has never been visited. I use IE 6, and Firefox 1.5.0.10 Same problem with both of them. Any other suggestions please. Thank you. <!-- a{color:#336CA3;} a:visited {color:#336CA3;} a:hover{color:#AE2836; background-color:#DCE0E8; font-style:inherit; font-weight:600; text-decoration:underline;} -->
Let's see it. Either post a link, or make a minimal test case that performs as you describe, and post the complete test code. cheers, gary
I went ahead and made a test case. It works as expected. How does yours differ from the working version? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>pseudo class test case</title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } a{ color:#336CA3; } a:visited { color:#336CA3; } a:hover { color:#AE2836; background-color:#DCE0E8; font-style:inherit; font-weight:600; text-decoration:underline; } /*]]>*/ </style> </head> <body> <p> Here is a link <a href="#">going nowhere</a> </p> </body> </html> Code (markup): cheers, gary
Gary, thanks for the help. I have applied the rules in this site http://www.istioploos.gr/IndexCSS10032007.htm. You will notice that the links on the left column that have not been visited yet are working fine. The rest are always blue. Have a look. Thank you.
I went ahead and replaced my code with yours: a{ color:#336CA3; } a:visited { color:#336CA3; } a:hover { color:#AE2836; background-color:#DCE0E8; font-style:inherit; font-weight:600; text-decoration:underline; } just in case I was missing something. Same result.
You have defined a:hover three times and a:visited four times that I found. The last visited is after the last hover, and will control. No offense meant, but that is the screwiest set of stylesheets I can recall seeing. How do you maintain or debug when nothing is semantic? What does the class "style162" refer to? BTW, the last :visited I found is between .style161 and .style162. Try moving the embedded styles, those within the style tags in head, to a spot after the links to the stylesheet files. cheers, gary
I deleted all visited tags. I left only the one needed and moved them to the stylesheet. Now it is working fine with firefox but not with IE. I even deleted the visited tag completely. Still IE fails to make hover change Dont worry no offense taken. I try after two weeks of selftraining into CSS to make a proffesional looking site. I know I have to learn a lot more but I will get there. Ty again.