PNG icon as background to <a> tag ?

[yutewa00]

Hi guys. I have a problem with some links. I want to append icons to them like this:
http://shrani.si/t/1t//37UH7mME/screen-1.jpg (http://shrani.si/f/1t//37UH7mME/screen-1.jpg)

I managed to make this work in FF but not in IE.

At first I had one class called button:


.button{
padding-left:19px;
text-decoration:none;
margin:0 3px;
line-height:20px;
}

And a class for each icon:


.user{
background:transparent url(../img/icons/user.png) no-repeat left;
}

I would apply that like this:


<a href="#" class="button user">Users</a>

I used iepngfix (http://www.twinhelix.com/css/iepngfix/)for transparent icons. It works but since I have this links in unordered lists it makes no sense to apply button class to every single link.

My ul list looks like this:


<div id="sidebar">
<ul>
<li>
<h3><a href="#" class="manage">Manage</a></h3>
<ul>
<li><a href="#" class="manage_page">Pages</a></li>
<li><a href="#" class="cart">Products</a></li>
<li><a href="#" class="folder">Product categories</a></li>
<li><a href="#" class="promotions">Promotions</a></li>
</ul>
</li>
<li>
<h3><a href="#" class="user">Users</a></h3>
<ul>
<li><a href="#" class="useradd">Add user</a></li>
<li><a href="#" class="group">User groups</a></li>
<li><a href="#" class="search">Find user</a></li>
<li><a href="#" class="online">Users online</a></li>
</ul>
</li>
</ul>
</div>


And my CSS looks like this:



#sidebar{
background:#FFF;
width:180px;
height:400px;
float:right;
margin:10px 0 10px 0;
padding:5px;
}
#sidebar ul{
list-style:none;
line-height:22px;
}
#sidebar ul li a{
padding-left:19px;
text-decoration:none;
margin:0 3px;
}
#sidebar ul li ul{
margin-left:10px;
}
#sidebar h3{
background:#f7f6f0;
/*border-bottom:1px solid #bd6f0a;*/
padding:2px;
}


This works in FF but in IE I can't get icons to show:
http://shrani.si/t/25/RJ/4xWnLHkn/screen-2.jpg (http://shrani.si/f/25/RJ/4xWnLHkn/screen-2.jpg)

Please help :S

[yutewa00]

Solved!

I forgot to add display:block; :)