Weird Hover with link thing going on

HTML & CSS
1

Hello All:

At my site, Paul Squillace: Design, Devleop, Deploy!, I seem to find that the links at the top of the page seem to only link the top part of the word and not the whole word itself.

I am not sure I ever experienced this before or know what is going on.

Any advice or help on this would be great.

thanks

Paul

2

It’s working fine in Opera. What browser/version are you having problems with?

3

Yeah for some reason in FF and chrome and safari it seems to link but only when I hover over the top part of the word.

4

I’m definitely seeing the problem in FF4 and IE9.

Disclaimer: I don’t know how to fix this. But the problem is not actually with the href links themselves. The problem, I think, is that the “s1” div is overlapping the navigation. See the blue outline on the attached screenshot.

5

You can fix it by adding overflow:hidden to the nav container:

.navigation {
  margin: auto;
  [COLOR="Red"]overflow: hidden;[/COLOR]
  padding: 5px;
  width: 1250px;
}

It’s best not to use position:absolute for page layout, though, as this is the sort of problem it quickly starts to cause.

6

Hi Ralph,

Thanks so much for that help and advice,

Works Perfect now.

Paul