Links in <li> work in body, but not inside div

[apptoychest]

Hey all, long time fan of Coding Forums, and recently have gotten some great help here so I thought I'd try again:

http://www.kidseducationalapps.com/

Note the links in the top:

<ul>
<li><a href="http://www.kidseducationalapps.com/app-ipad-iphone-android-faq/">Submit an App</a></li>
<li><a href="http://www.kidseducationalapps.com/app-ipad-iphone-android-faq/">FAQ</a></li>
<li><a href="http://www.kidseducationalapps.com/app-ipad-iphone-android-faq/">Advertise</a></li>
<li><a href="http://www.kidseducationalapps.com/app-ipad-iphone-android-faq/">Contact</a></li>
</ul>

When I move this snippet of code outside of the main "wrapper" div, the links work fine. However, when I move them inside the div so the links sit nicely on top of the page, they stop working. This is across browsers...

What would cause the links to go dead like that?

[apptoychest]

OK this is even weirder... if you hover over the links, it seems like only some of the letters in the link actually link.

As if the linkable area has been squashed...

[SB65]

The problem is due the negative top margin on #nav, which is causing that div to be positioned over most of your links. It's not over the first three characters of "Submit a link", which is why you get the odd behaviour. If you make your #nav css:

#nav {
    float: right;
    font-size: 14px;
    height: 65px;
    margin-right: -4px;
    margin-top: -87px;
    /*padding-left: 230px;*/
    position: relative;
    text-align: right;
    white-space: nowrap;
}

That looks like it solves the problem.

EDIT: Firebug is great for spotting this sort of thing.

[apptoychest]

Great catch! I loaded up firebug and saw the exact think you were describing! Thanks so much.

Love this place!