SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chrome doing weird things with a:hover

    I am building a site with a top navigation bar above the header and a second navigation bar below the header.

    The a:hover function is behaving strangely in Chrome v12.0.742. The a:hover styling doesn't appear (and the pointer doesn't register that it's a link) until I hover slightly above the text. I've taken a look in Safari and the link hover is working fine there. Here is my css:

    Code CSS:
    #nav {
            display: inline;
    	line-height: 3em;
    	}
     
    #nav ul li {
    	display: inline;
            float: left;
    	}
     
    #nav ul li a {
            display: block;
    	padding: 0 25px 0 0;
    	}
     
    #nav ul li a:link {
            color: #a2c0d4;
    	}
     
    #nav ul li a:visited {
            color: #a2c0d4;
    	}
     
    #nav ul li a:active {
    	color: #fff;
            text-decoration: none;
    	}
     
    #nav ul li a:hover {
    	color: #fff;
            text-decoration: none;
    	}

    I know there are issues with Chrome and a:hover, and I have gone through the suggested solutions that I have found via Google. These include: putting a:hover after a:visited in the CSS file (I always do this anyway) and including li:hover a as well as li a:hover (which didn't work for me).

    I should note that this is only happening in my top navigation bar. The second navigation bar has no hover problems at all, and the same code.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Please post the html that goes with your css or preferably post a link to the page.

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://smallbrightpebbles.com/about

    I've since tested on a different computer, where Chrome (same version) works fine but now the problem crops up in Safari. Firefox is fine.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm unable to reproduce the problem you mention in chrome or safari.

    That content skip link is giving you a huge horizontal scrollbar though. Change it to left:-999em instead of left:1000px;
    Code:
    #access a {
    height:1px;
    left:-999em;
    overflow:hidden;
    position:absolute;
    top:auto;
    width:1px;
    }
    Also your lower content navbar has a large gap at the top of it in FF3. In think that is due to the div you have nested as a direct child of the UL. Only a <LI> can be the direct child of a UL.

    Code:
    <ul id="contentnav">
        <div class="menu-header">
        <ul id="menu-category-menu" class="menu">
        <li><a href="#>Geography</a></li>

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur. I had noticed the horizontal scroll and it was on my list of things to fix. Have done it now.

    The div inside the ul for the lower navbar wasn't something I put there; it turns out that it's something created by the Wordpress custom menu. Thanks for bringing it to my attention: I've removed my outer ul and reassigned the CSS properties to ul#menu-category-menu (the one generated by Wordpress).

    Unfortunately my original problem with a:hover is still a mystery.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm not seeing any problems in Chrome PC or Mac but I notice you have set topnav to display:inline which could cause problems.

    Try changing the code to this and see if there is any change for you.

    Code:
    #topnav {
      display: block;
      line-height: 3em;
      position: relative;
      z-index: 99;
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •