Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    <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?

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    #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.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great catch! I loaded up firebug and saw the exact think you were describing! Thanks so much.

    Love this place!


  •  

    Tags for this Thread

    Posting Permissions

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