Question

Im trying to create a horizontal List sing html and css but when is displayed in the browser it seems to go down in steps rather than in a straight line, any idea what might be causing this?

CSS

#nav li a {
display:block;
float:left;
text-indent: -9999px;
height: 50px;
width: 150px;
background-image:url(images/buttons.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
margin-left:15px;
}

#nav li a:hover {
opacity: 0.5;
}

#nav li.one a {
background-position: 0pt 0px;
}

#nav li.two a {
 background-position: 0pt -88px;
}

#nav li.three a {
background-position: 0pt -176px;
}

HTML

<ul id="nav">

<li class="one"><a href="#"><strong>One</strong> Selected Works on Display</a></li>
<li class="two"><a href="#"><strong>Two</strong> Thoughts, Links, Inspiration &amp; Miscellany</a></li>
<li class="three"><a href="#"><strong>Three</strong> Those Who Have &amp; Continue to Inspire</a>    </li>

</ul>

Answer 1

Float the LI tag, not the A tag.

#nav li a {
display:block;
float:left;     <--- move to LI
text-indent: -9999px;
height: 50px;
width: 150px;
background-image:url(images/buttons.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
margin-left:15px;
}