Chrome doing weird things with a:hover

HTML & CSS
1

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:

#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

Hi,
Please post the html that goes with your css or preferably post a link to the page.

3

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

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;


#access a {
height:1px;
[COLOR=Blue]left:-999em;[/COLOR]
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.

<ul id="contentnav">
    [COLOR=Red]<div class="menu-header">
    <ul id="menu-category-menu" class="menu">[/COLOR]
    <li><a href="#>Geography</a></li>
5

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

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.


#topnav {
[B]  display: block;[/B]
  line-height: 3em;
[B]  position: relative;
  z-index: 99;[/B]
}