My buttons show up, but I cannot click on them.

My HTML:

        <ul id="nav">
            <li class="welcome"><a href="index.html">Welcome</a></li>
            <li class="location"><a href="location.html">Location</a></li>
            <li class="services"><a href="services.html">Services</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
        </ul>

My CSS:

#nav li{

display: inline;

}

#nav li a {
    text-indent: -9999px;
    display: block;
    width: 90px;
    height: 51px;
    margin: 10px;
    float: left;
}
    #nav li.welcome a{
        background: url(../img/welcome_btn.png) center no-repeat;
    }
    #nav li.location a{
        background: url(../img/location_btn.png) center no-repeat;
    }
    #nav li.services a{
        background: url(../img/services_btn.png) center no-repeat;
    }
    #nav li.contact a{
        background: url(../img/contact_btn.png) center no-repeat;
    }
  • It works for me. Tell us what browser(s) you're having problems with or put up a testcase somewhere. http://jsbin.com/ is a good place to do so. Doug over 6 years ago

1 answer

danwellman 5600
1
point

The links don't need to float, float the li elements instead, and put the margin on them as well. I would remove display:inline from the li elements as well, although you may then need to set the margin to 5px to fix a bug in IE6 which doubles left and right margins on floated elements

Answered over 6 years ago by danwellman
  • I put the float on the li instead and removed the display: inline, but the links are still not clickable. Weird. It worked when I wrapped it in a div, but it seemed redundant to do so. It must be inheriting something it shouldn't... Tristram over 6 years ago