Styling Submit buttons with Images

[tomhumf]

Hi,

I'm trying to use the sliding doors technique on a submit button. It works in Firefox as expected. In IE6 the image doesnt change, and the hand pointer doesnt appear on hover. Any suggestions?

.checkout {
background:url(../images/cartbuttons/checkout.gif) repeat 0px 0px;
width: 156px;
height: 60px;
border:0px;
display: block;

}
.checkout span {
display: none;
}
.checkout:hover {
background: url(../images/cartbuttons/checkout.gif) repeat 0px -60px;
cursor:pointer;
}

<form>
<input type="submit" value="" class="checkout">
</form>

[swa66]

That's actually not sliding doors in my book, just moving an image on hover.

But the reason it doesn't work is one of the bugs/features of IE6: it doesn't support hovering over anything but an <a>.

To fix it you need some scripted help e.g. IE7.js [code.google.com] does wonders.

[edited by: DrDoc at 12:06 am (utc) on April 21, 2009]
[edit reason] fixed link code [/edit]

[tomhumf]

Hi, thanks for the reply. I temporarily abandoned rollovers for submit buttons. Instead I am using

<input type="image" value="image.jpg">

Are there any issues with using an image like this for submit buttons? I'm a bit concerned about not using the submit attribute anywhere in the form.

[DrDoc]

No issues at all, unless you make it one.

Images and conventional submit buttons work equally well.