homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
HREF causing hover issues
certain hrefs cause issue with link hover behavior
AWildman

10+ Year Member



 
Msg#: 3510142 posted 9:35 pm on Nov 20, 2007 (gmt 0)

Okay, I know this is going to sound insane so please bear with me. I have a top navigation made using an inline unordered list. All but one have right padding. On hover the text color changes. Nothing fancy.

I just noticed today that the hover works on all but two of the links. I made sure it wasn't a position issue, i.e. - I put other links in same position and they still worked. I was concerned that there may be some overlapping element that wouldn't allow the hover to trigger.

I tried different link text on one of the links that won't do the hover. No particular reason why. The hover didn't work.

I tried removing the padding. No luck.

I tried copying the list item from one of the links that work and replacing the link text and href value. No luck.

Then I simply tried replacing the href and you know what? That worked! This is a plain href, no params. AND, other links for which the hover works ALSO have the same type of href.

So, in the following the fourth and fifth links don't work:
<ul>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/some_file.html" tabindex = "10">Some file</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/faqs/" tabindex = "15">FAQ</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/forms/" tabindex = "20">Form</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/due_dates.html" tabindex = "25">Due Dates</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/board_members.html" tabindex = "30">Board Members</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/related_links.html" tabindex = "35">Related Links</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/contacts.html" tabindex = "40">Contacts</a></li>
<li><a href = "http://www.example/v2/" tabindex = "45">Home</a></li>
</ul>

Applicable css:
#topnav ul li a:hover, li.topnavlinkpad a:hover{color: #8dc73f;}

#topnav is the div in which the ul above is contained.
Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

And yes, the html and css validates on the W3C validators.

Verdict? Am I nuts? Has anyone had this issue before? The two links that won't hover work, i.e. - they go to their intended pages. HELP!

[edited by: AWildman at 9:41 pm (utc) on Nov. 20, 2007]

 

londrum

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3510142 posted 9:50 pm on Nov 20, 2007 (gmt 0)

it might have something to do a:link and a:visited.
have you set up :visited styles in your CSS?

we probably need to see all the styles that apply to the links though before we can figure it out

AWildman

10+ Year Member



 
Msg#: 3510142 posted 1:11 pm on Nov 21, 2007 (gmt 0)

Okay, here are the rest of the anchor styles:

a{color: #1d9b00;}

a img, a:hover img, #headertext a, img{text-decoration: none; border: none;}

#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover{color: #8dc73f;}

#topnav ul li a, #topnav ul li a:visited
{
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

Any help is greatly appreciated. It is just SUCH an odd thing!

AWildman

10+ Year Member



 
Msg#: 3510142 posted 3:19 pm on Nov 26, 2007 (gmt 0)

No ideas, huh? I don't even know what else to try to troubleshoot. I think I've hit it all.

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3510142 posted 5:27 pm on Nov 26, 2007 (gmt 0)

Have you tried placing the
:visited rule before the :active rule in the CSS file?
jessejump

5+ Year Member



 
Msg#: 3510142 posted 6:50 pm on Nov 26, 2007 (gmt 0)

I just copied all your HTML/CSS into a new file and all the links worked.

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3510142 posted 6:54 pm on Nov 26, 2007 (gmt 0)

I just noticed today that the hover works on all but two of the links.

Sounds like you have a :visited issue happening. Your visited parameters are the same as your hover. The order of the rules should be...

LVHA

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

Your hover is overriding your visited and it sounds like some colors need to change so you can see what is happening. You've visited those two links that are not doing what you want them to do. Clear your Internet history and those two links will probably revert back to what they were before being visited, the a:link status.

Have you tried placing the :visited rule before the :active rule in the CSS file?

Me thinks that is the issue. :)

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3510142 posted 9:11 pm on Nov 26, 2007 (gmt 0)

agreed it's likely pseudo class order

In this case you have a very simple case of the cascade doing it's work..

the rules that matter (in cascade order) here are

1. #headertext a:hover
2. #topnav ul li a:hover

3. #topnav ul li a:visited

the first two apply to the hover and the second (#2) of the first two win, not only because of the cascade but because it is more specific (i.e. there is more elements in the selector)

when reaching rule 3 (#3), it is equal to rule 2 (#2) as per specificity so the Cascade will apply this time and the last rule takes precedence - e.g if the link is visited and also then hovered over.. is the fact that it is visited (last in the cascade) that takes precedence!

You can 'swap' the order, which should work, as suggested

#topnav ul li a, #topnav ul li a:visited
{
color: #dad;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover {
color: #f00;
}

However, did you know that you can also get situations like this to work by getting more specific - combine the pseudo classes just like combining selectors it makes them(psuedo classes) more specific

aka... I never really did understand why we should need 4-5 rules, in the recommended order, for hover effects to work :o

you could try adding ..
#topnav ul li a:visited:hover

to
#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover, #topnav ul li a:visited:hover {
color: #f00;
}

this might suit better, or not.. but by combining pseudo classes you have added an extra depth to the specificity of the selector and have over-ridden the Cascade

just another way...

Suzy

edit reason - my bad, my example showed links in the original order.. sorry

[edited by: SuzyUK at 10:07 pm (utc) on Nov. 26, 2007]

AWildman

10+ Year Member



 
Msg#: 3510142 posted 1:05 pm on Nov 27, 2007 (gmt 0)

Boy am I dumb! Switching the order worked. Why I didn't think to clear my cache and try again is beyond me.

Thanks so much everyone!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved