Rollovers for Input Buttons

[john_m]

Hi,
I'm trying to create a similar effect to the Macromedia website input button rollovers. It currently works in IE but not in Firefox. My CSS code is:

input.submit
{ BORDER-RIGHT: #ACB5B5 3px double; BORDER-TOP: #ACB5B5 3px double; BACKGROUND: white repeat-x; BORDER-LEFT: #ACB5B5 3px double; BORDER-BOTTOM: #6F7777 3px double; FONT-FAMILY: Verdana, Arial, sans-serif; FONT-SIZE: 10px; }

:hover input.submit
{ BORDER-RIGHT: #6596CD 3px double; BORDER-TOP: #6596CD 3px double; BORDER-LEFT: #6596CD 3px double; BORDER-BOTTOM: #4468A9 3px double; CURSOR: pointer; }

and the HTML code for the input button is:
<a href="#"><input name="submit" value="submit" class="submit" type="submit" /></a>

Now in Firefox the rollover doesn't work and nor does the link- Firefox thinks that the link is '#' when it's actually something else. I've tried looking in the Macromedia stylesheets to see how this was done but didn't have any luck. Does anyone else know?

[Stormfx]

Change:

hover input.submit

To

input.submit:hover

[john_m]

That gets it working in Firefox but now it doesn't work in IE :(

[D_Blackwell]

IE doesn't accept :hover for anything but the <a> element.

Take a look at this thread: [webmasterworld.com...]

My vote goes to whatever:hover