Internet Explorer submit button styling

Question

I'm making a web application and I got the design for it from a sub-contracted design company. The design is pretty nice, I like it, but I've stumbled across one thing I'm not sure how to implement nicely.

The thing is - they've redesigned the looks of buttons to match the page style. So now I have two images - button up and button down. In Opera and FF I just say in css something like this:

input[type="submit"]
{
    background-image: url(btn_up.png);
}
input[type="submit"]:active
{
    background-image: url(btn_down.png);
}

And it works like a charm. IE unfortunately does not understand the :active part. As with most web applications the IE crowd are the main intended audience, so it's rather important that it looks good at least there.

Currently I've made a bulky workaround using an IE-only JavaScript, but I'm wondering - isn't there a more elegant way of doing this? Google and SO search did not help.

Answer 1

Hello,

As far as I was aware the CSS Pseudo-classes are for links ONLY in IE. This may have changed in IE8 but I'm not aware of it. So basically I don;t think there is an elegant way of implementing it via CSS.

That's not a useful answer so I'll also add that I would implement it using images and client-side script which isn't elegant but should allow do the job across all browsers if the client-side script is right.

Cheers