Hi all,

I'm having a problem with my CSS sliding doors and sprite implementation.

Each list item has 3 states (normal, hover and pressed), and each list item contains a div which can have multiple pieces of content inside it.

The problem I'm having is that because I'm using a div inside of the li (and not an <a> tag), if you hover the mouse pointer over the very left hand side of a list item, only the first 10 pixels of the list item get highlighted, and not the entire div.

I can't see any other way of implementing sliding doors and sprites for a list requiring multiple pieces of content per li (such as the delete image and title).

Any advice would be much appreciated.

Cheers, Gaz.

HTML:

    <ul class="itemList">
    <li class="first"><div><a class="deleteLink" href="#"><img class="deleteHidden" src="../../a/i/buttons/button_delete.png"></a><a class="block" href="#"><h2 class="large">Title</h2></a></div></li>
    <li><div><a class="deleteLink" href="#delete"><img class="delete" src="../../a/i/buttons/button_delete.png"></a><a class="block" href="#"><h2 class="large">Title</h2></a></div></li>
    <li class="last"><div><a class="deleteLink" href="#"><img class="delete" src="../../a/i/buttons/button_delete.png"></a><a class="block" href="#"><h2 class="large">Title</h2></a></div></li>
</ul>   

CSS:

.itemList li {
    display: block;
    height: 50px;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 0 0 0 10px;
    margin: 0;
}

.itemList li div {
    text-align: left;
    text-shadow: 0px 1px 1px #fff;
    display: block; 
    background-position: 100% 0;
    background-repeat: no-repeat;   
    height: 50px;
    text-indent: 5px;
    padding: 0;
    margin: 0;
}

.itemList li.last, .itemList li.last div {
    height: 54px;
}

.itemList li.single, .itemList li.single div {
    height: 53px;
}

.itemList li:hover {
    background-position: 0 -50px;
}

.itemList li div:hover {
    background-position: 100% -50px;    
}

.itemList li.last:hover {
    background-position: 0 -54px;
}

.itemList li.last div:hover {
    background-position: 100% -54px;    
}

.itemList li:active {
    background-position: 0 -100px;
}

.itemList li div:active, .itemList li div:active {
    background-position: 100% -100px;   
}

.itemList li.last:active {
    background-position: 0 -108px;
}

.itemList li.last div:active {
    background-position: 100% -108px;   
}