IE button background image doesn't work...

Question

Hi I am trying to add background image to my button. The image contains two states, A and A:hover.

a->background-position:bottom and a:hover=>background-position:top. It works fine in chrome and firefox but IE sucks so bad and display total height of the images (two states together). I was wondering if anyone know how to fix it. Thanks..

Html

<ul id="menu">

 <li id="dummy"><a href="#"></a></li> 
 <li id="skill"><a href="#"></a></li>

</ul>

my css

#menu #skill a
{
background-image:url("BTskill.png") ;
background-repeat:no-repeat;
background-position:bottom; 
list-style-type:none ;
display:block;
width:98px;
height:18px;
margin-top:5px;
}



#menu #skill a:hover
{
background-image:url("BTskill.png") ;
background-repeat:no-repeat;
list-style-type:none ;
display:block;
width:98px;
height:18px;
background-position: top;  // the image position would change if user hovers the button
margin-top:5px;

}

Update: I just found out if I take out of a in my css

   #menu #skill
    {
    background-image:url("BTskill.png") ;
    background-repeat:no-repeat;
    background-position:bottom; 
    list-style-type:none ;
    display:block;
    width:98px;
    height:18px;
    margin-top:5px;
    }

This image would show the correct height, but it is not a link anymore..:(.. man..I hate IE so freaking much...

Answer 1

you don't need all the duplicated css for a start.

try:

#menu #skill a
{
background-image: url(BTskill.png);
background-repeat: no-repeat;
background-position: left bottom;
display: block;
width: 98px;
height: 18px;
margin-top: 5px;
}

#menu #skill a:hover
{
    background-position: left top;
}

make sure the hover selector is after the non hover state in your css, you can always try adding a !important to the end.

also try giving the a some content, like an