Grow your CSS skills. Land your dream job.

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

  • # January 28, 2010 at 4:15 pm

    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

  • Home
  • About
  • News
  • Join

Now problemo number 2!

i have a footer nav area set to display:block; and background-color change, works in IE and FF
but not chrome or safari!! anyone know a way around this? any help would be very much appreciated!

heres the code, screenshot:
[attachment=0]nav_hover12.jpg[/attachment]

Code:
#footer li { font-size:9pt; list-style:none; text-indent:2px;}
#footer li.copy { font-size:8pt; list-style:none; text-indent:2px; padding-top:25px;}
#footer li a { color:#595959;text-decoration:none; }
#footer li a:hover { color:#FFFFFF; display:block; background-color:#f7a008; position:relative;}

cheers, Mark

# January 28, 2010 at 5:50 pm

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; }
# January 29, 2010 at 7:29 am

Problem 1
Just add some padding to #nav li

Problem 2
Remove display:block from #footer li a:hover
li tags are block elements

You only have to specify pseudo classes in the proper order if you are using them, in this case a and a:hover in that order are fine.

P.S. Next time please post the html code as well, there was none for the footer.

# January 29, 2010 at 2:42 pm

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

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

# January 29, 2010 at 3:41 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".