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:


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 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:


Please help :S

[yutewa00]

Solved!

I forgot to add display:block;