Simple HTML help

Question

My <li> wont turn into a link for some reason here is my html and css

Hope some one can help.

<div class="header_quick_link">
    <ul>
     <li style="padding-left:700px;"><a href="#"><img src="images/signup-off.png" height="26px" alt="sign-up off"/></a></li>
     <li style="padding-left:798px;"><a href="#"><img src="images/login-off.png" height="26px" alt="sign-up off"/></a></li>
    </ul>
   </div>


.header_quick_link{
left: 0px;
right: 0px;
top: 0px;
height: 26px;
position: absolute;
background: url(../images/quicklink.png);
background-repeat: repeat-x;
z-index: -1;
}

.header_quick_link li {
float: none;
list-style: none;
left: 0px;
right: 0px;
top: 0px;
position: absolute;
z-index: 6;
height: 26px;
}

Answer 1

Alright, you've got a bewildering mix of floats, absolute positioning, lists, background images, foreground images, margins and padding there. Keep it simple. Don't overcomplicate it. Start with some semantic HTML:

<div id="signup">
<a href="#"><img src="images/signup-off.png" height="26" alt="sign-up off"/></a>
<a href="#"><img src="images/login-off.png" height="26" alt="sign-up off"/></a>
</div>

then work out how to style it. I imagine you want two links next to each other on the right. Easy done.

#signup { overflow: hidden; float: right; }
#signup a { float: left; display: block; margin: 0 10px; padding: 2px 8px; }