I stripped my files to a few lines to reduce the number of possible sources of the problem. I have a small html file with one link to another page and my html file uses a css file with the three declarations below:
a:link {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:visited { color: #993366;
text-decoration: none;
}
If I comment out the "visited" rule, then hover works, but with a:visited there, hover does not cahange the color or put the underline on the link's text.
I am using IE6.0
Any ideas as to why this may be happening?
I'll appreciate your help.Your CSS for your links should be in the order of: :link :visited :hover :activeMost people remember it like this: LoVe HAte.fredmv has it right. You should also know that some browsers inherit these improperly so you should be verbose in the hierarchy of your CSS declaration if you nest any <a> links.
In a page that has several groups of navigation, header, side, footer, etc., be verbose with the parent-child naming of the style. I don't have an exact sample handy but a co-wroker here just ran into it a couple weeks ago and being verbose solved it.
By verbose I mean to be more specific than you'd think you need to be, like:
#div1 #nested-div1 ul li.lvl1 a:link {yadda}
#div1 #nested-div1 ul li.lvl1 a:visited {yadda}
#div1 #nested-div1 ul li.lvl1 a:hover {yadda}
#div1 #nested-div1 ul li.lvl1 a:active {yadda}
Although this causes some excessive code it has solved "misbehaving" link issues for me several times.Thanks for your advice Fred and TimeBandit. My code is now working after changin the order of the rules as you suggested.
Thanks Again,
-Quantum-
a:link {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:visited { color: #993366;
text-decoration: none;
}
If I comment out the "visited" rule, then hover works, but with a:visited there, hover does not cahange the color or put the underline on the link's text.
I am using IE6.0
Any ideas as to why this may be happening?
I'll appreciate your help.Your CSS for your links should be in the order of: :link :visited :hover :activeMost people remember it like this: LoVe HAte.fredmv has it right. You should also know that some browsers inherit these improperly so you should be verbose in the hierarchy of your CSS declaration if you nest any <a> links.
In a page that has several groups of navigation, header, side, footer, etc., be verbose with the parent-child naming of the style. I don't have an exact sample handy but a co-wroker here just ran into it a couple weeks ago and being verbose solved it.
By verbose I mean to be more specific than you'd think you need to be, like:
#div1 #nested-div1 ul li.lvl1 a:link {yadda}
#div1 #nested-div1 ul li.lvl1 a:visited {yadda}
#div1 #nested-div1 ul li.lvl1 a:hover {yadda}
#div1 #nested-div1 ul li.lvl1 a:active {yadda}
Although this causes some excessive code it has solved "misbehaving" link issues for me several times.Thanks for your advice Fred and TimeBandit. My code is now working after changin the order of the rules as you suggested.
Thanks Again,
-Quantum-