[Design with CSS 3581] My list block is not working

[Konstantinos]

Hello, i am trying to create a ul li list but with blocks. The thing
that i cant understand is how to put the background image into the a
block. My html file is the following:

<div class="controls">
        <ul class="communicate">
        <li class="title">Master menu title</li>
                <li class="communicate-top"><a href="#">Title1 <br /><span
class="info">Here is the info for title 1.</span></a></li>
        <li class="download"><a href="#">Title 2 <br /><span
class="info"> Here is the info for title 2.</span></a></li>
        <li class="share"><a href="#">Title 3 <br /><span
class="info"> Here is the info for title 3.</span></a></li>
        <li class="create-new"><a href="#">Title 4 <br /><span
class="info"> Here is the info for title 4.</span></a></li>
    </ul>
</div>

The css used for the above code is the following:
.controls {
        width:200px;
        float:left;
        margin-top:50px;
        margin-left:50px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border:1px solid #D5D6D7;
        border-bottom:none;
}

.communicate {
        list-style-type:none;
        background-color:#ffffff;
        margin:0;
        padding:0;
}
.communicate li {
        padding:10px 10px 15px 60px;
        border-bottom:1px solid #D5D6D7;
}
.communicate li a {
        color:#999;
        text-decoration:none;
        display:block;
        border:none;
}
.communicate li a:hover {
        background-color:#E5F1FA;
}
.communicate .title {
        background-color:F3F0DE;
        font-weight:bold;
        margin:0;
        padding:3px;
}
.communicate-top {
        background: url("images/icon-1.png") no-repeat scroll 10px 13px
transparent;
        display:block;
}
a.communicate-top {
        display:block;
}

.communicate .share {
        background: url("images/icon-2.png") no-repeat scroll 10px 13px
transparent;
}
.download {
        background: url("images/icon-3.png") no-repeat scroll 10px 13px
transparent;

}
.create-new {
        background: url("images/icon-4.png") no-repeat scroll 10px 13px
transparent;
}

The problem is that i cannot make all the li acting like a block. It
only works for the a href inside the li tag but not with the
background image.
Do you have any ideas what can i do???

Thanks for your time
Kostas

-- 
--
You received this because you are subscribed to the "Design the Web with CSS" 
at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscr...@googlegroups.com