Rollover submit buttons (IE Vs FF)

I have created a submit button.want to chage the image on rollover.

My code is :

IN HTML :-
<input type="submit"/>

IN CSS :-
input[type=submit]{
background-image:url(images/blue_btn.gif);
background-repeat:no-repeat;
width:99px;
height:37px;

}

input[type=submit]:hover{
background-image:url(images/yellow_btn.gif);
background-repeat:no-repeat;
width:99px;
height:37px;

}



Its working fine in FF but its not working in IE :(



Thanks in advance :)

Which version of IE? In IE6 it’s not working because it doesn’t support the CSS attribute selector. You need to asign an ID to the input and apply the styles accordingly. I don’t know about IE 7, though, as I haven’t done that yet.

Also this <![endif]-->. Is this in your CSS file or where?

Which version of IE? In IE6 it’s not working because it doesn’t support the CSS attribute selector. You need to asign an ID to the input and apply the styles accordingly. I don’t know about IE 7, though, as I haven’t done that yet.

Also this <![endif]-->. Is this in your CSS file or where?
i tried the code using id but its not working :(


IN HTML :-
<input type="submit" id="test"/>

IN CSS :-
#test{
background-image:url(images/blue_btn.gif);
background-repeat:no-repeat;
width:99px;
height:37px;

}

#test:hover{
background-image:url(images/yellow_btn.gif);
background-repeat:no-repeat;
width:99px;
height:37px;

}