[Solved] a:hover Effects Not Working on Safari & Chrome, IE

[quarterlight]

Hey!!

First post, so Hi!!!
Hope someone can help me with out this one.

i have a nav bar with a different colored border-bottom on a:hover and <li id="currentpage">
This works fine in chrome, FF and safari but not IE
heres a screenshot and the CSS, HTML:

[attachment=1]nav_hover1.jpg[/attachment]

Code:

CSS
#nav ul { list-style:none; }
#nav li { float:left; text-align:center; margin-left:30px; }
#nav a { color:#0884b0; text-decoration:none; }
#nav a:hover { border-bottom: 4px solid #f7a008; }
#nav #currentpage a { border-bottom: 4px solid #0ea611; }

HTML

[Brido]

You need to specify your :pseudo links in the proper order. So lets throw in the visited pseudo class before your hover.

Code:

#nav ul { list-style:none; }
#nav li { float:left; text-align:center; margin-left:30px; }
#nav a { color:#0884b0; text-decoration:none; }
#nav a:visited { }
#nav a:hover { border-bottom: 4px solid #f7a008; }
#nav #currentpage a { border-bottom: 4px solid #0ea611; }

[quarterlight]

cheers guys, your advice has helped a lot!!

RE: problem 1,
now ive added the padding to the nav li, the border bottom is showing however…. the nav looks fine until i mouse over it, it then jumps about 20 pixels left! any ideas how i can fix that?

RE:problem 2
unfortunatley im not getting the required effect on my footer navigation now ive taken display:block; off my
#footer li a:hover

it doesnt fill the width of the column now its just the length of the text, like this:
[attachment=0]hover_fx1.jpg[/attachment]

i tried setting a width to it, but no joy :(

heres the code for that bit again (with html this time)

Code:

HTML

stay current

• Subscribe to our RSS feed
• Follow us on Twitter
• Become a member

CSS

#footer { clear:both; width:100%; padding:50px 20px 20px 20px; height:160px; font-size:11px;}
#middle { float:left; width:220px; padding-right:10px; }
#footer li { font-size:9pt; list-style:none; text-indent:2px; display:block; }
#footer li a { color:#595959;text-decoration:none; }
#footer li a:hover { color:#FFFFFF; background-color:#f7a008; }

mark

[quarterlight]

ive fixed the footer issue, for chrome, FF, safari & Opera
#footer ul li a { display:block } allows the background hover area to the full width of the column as wanted

and with a conditional IF IE stylesheet the display:block goes on the #footer ul li a:hover
not sure if it validates yet but its looking pretty for now anyways.

RE: the nav getting kicked left in IE, something to do with the reflow or something, anyway, applying a height:1%; to the containging div stops it.. apparently quite commonly known as the "3 pixel jog"

hope this helps others with similar problems

[Author]

Posts