form button doesn't work inside anchor, with firefox

firefox, css rollover doesn't work on form button

[silmarillion9]

I've been using a css method for making a form submit button have a rollover effect. But have recently found that it doesn't work with firefox version 1.

Anyone know a work around?

sample:

.signup { background: url('image.jpg'); }
button.signup { background-position: 0 -17px; height: 17px; margin: }
a:hover button.signup { background-position: 0 0; }

.rollover a, button
{
width: 31px;
padding: 0;
border: 0;
cursor: pointer;
display: block;
}

<form><a class="rollover" href="#"><button type="submit" name="enter" class="signup"></button></a></form>

the only way i've managed to get it working on firefox so far is to remove the anchor from around the button, but of course this stops the rollover effect.

[silmarillion9]

After looking at this problem further, i found that when the href="#" is removed from the anchor, then the rollover works in firefox and the button submits properlly.

But removing the href="#" stops the rollover working in IE and Opera, though does allow the submit button to work.

Anyone else got any ideas for a way to get it working with all three?

[SuzyUK]

Hi silmarillion9 - Welcome to WebmasterWorld

A way to do it would be use

button:hover;

.

But IE doesn't support hover on elements other than <a>, there are workarounds in the form of javascript or a whatever:hover [xs4all.nl] behaviour file.

Suzy