input=type background images

[ripski]

I want to use my own images (& rollover)in place of default form input buttons.
I have got this to work in IE (using v6) by wrapping the HTML with an <a>nchor tag:

<a href=""><input type="submit" name="hSubmit" value="blah" class="button"></a>

input.button {
width:60px;
height:18px;
border: none;
font-family: sans-serif;
color: #000000;
font-size: 10px;
vertical-align: middle;
background-image: url(button60_off.gif)
}
:hover input.button {
width:60px;
height:18px;
border: none;
font-family: sans-serif;
color: #000000;
font-size: 10px;
color: #0000FF;
vertical-align: middle;
background-image: url(button60_on.gif)
}

This works fine in IE, but not in Firefox. Can anybody point me in the right direction?

[eljaykay]

Hi -
If you REALLY need a hover effect, use an id name on the a href then try:

a#button:link, a#button:visited{
whatever styles;...}
a#button:hover{
what different styles;...}

As usual, IE will accept pretty much any coding and attempt to 'clean it up' ;-) When using a hover effect on a link, need to include any in between steps - in this case, visited.

Good luck,
El

[moltar]

Welcome to Webmaster World ripski!

There is no guaranteed nor there is a correct way to do this with CSS alone. You will have to write a piece of JavaScript that will replace the image on the "onfocus" event.

[ripski]

Thank you both. I only stumbled across this site a few days ago. Very impressed with the content.

I didn't write the initial post clearly at all (first ever post!).

The problem isn't the rollover. It works well in both IE & FF, but under Firefox the button doesn't function.

I want to be able to select a theme from a drop down list. I have 2 buttons, 1 for select (submit) and 1 for cancel.
Under IE the rollover works and the buttons do what I intend.
Under FF, rollover is fine, but the <a> tag seems to stop the 'submit'. It works in the same way as the cancel, so it's sending something.

An earlier post on the forum stated that IE will only allow the :hover pseudoclass on <a>nchor tags. That's why I've gone down this path.

I think the id method might be a winner.

[ripski]

I've realised that containing the input type="submit" within an <a href=""> tag causes Firefox to reload the page when clicked.

This behaviour occurs in FF and Netscape 7.2, but not IE6 and Opera.