CSS: Link hover not working in Chrome and Safari

Question

I came across this free example website design template which has some links across the top. On hover, the link text and their background are supposed to change colour, according to the CSS. It works in Firefox, Opera and IE but there is no change on hover in Chrome 17.0.963.79 and Safari 5.1.2, so I'm suspecting a webkit issue. But the CSS looks innocuous enough. Where's the problem here? The part of the CSS for this hover is the following:

.topNaviagationLink a:hover
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png);    
}

Answer 1

That's interesting...

This works, would it be acceptable?

.topNaviagationLink:hover a
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png); 
}

Answer 2

It has to do with setting display:block only on hover. Adding display:block to the anchors from the get go fixes the problem, however it does change the display a little.

.topNaviagationLink a {
    display:block;
    text-align:center;
}

Remove the negative margin from .topNaviagationLink. It will look a tiny bit different but it works a lot better (the hover targets are where you would expect, etc).