Why doesn't this image sprite menu display properly, and why aren't the links working?
        Posted  
        
            by briligg
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by briligg
        
        
        
        Published on 2010-05-14T20:09:52Z
        Indexed on 
            2010/05/14
            20:14 UTC
        
        
        Read the original article
        Hit count: 393
        
The code validates. There should be two more images in the menu on the left, above the visible one of the silo. And each should be a link.
http://www.briligg.com/agnosticism.html
css is: external style sheet:
.menu {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 150px;
}
.menu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 0;
top: 260px;
}
.menu li, .menu a {
width: 150px;
height: 150px;
}
internal style sheet:
.menu {
height: 450px;
}
.mirror {
top: 0;
}
.mirror {
background: url(http://www.briligg.com/images/menu-ag.png) 0 0;
}
.wormcan {
top: 151px;
}
.wormcan {
background: url(http://www.briligg.com/images/menu-ag.png) 0 -151px;
}
.wormsilo {
top: 301px;
}
.wormsilo {
background: url(http://www.briligg.com/images/menu-ag.png) 0 -301px;
}
html:
<ul class="menu">
<li class="mirror">
<a href="whoryou.html"></a>
</li>
<li class="wormcan">
<a href="aroundyou.html"></a>
</li>
<li class="wormsilo">
<a href="beyondyou.html"></a>
</li>
</ul>
        © Stack Overflow or respective owner