personalizzare l'elemento button

[maxcondor]

Vorrei inserire un'immagine al posto dell'elemento button di un form

<button type="submit" id="btncerca"  onclick="trova();" tabindex="13" title="effettua una ricerca" >
</button> 

il css

#btncerca {
    background-image:url(../images/btn_trova.jpg);
    width:67px;
    height:29px;
    
} 

il problema è che in ie l'immagine non compare proprio, mentre in firefox compare, ma con rettangolo bordato.
Nell'immagine allegata l'immagine di sinistra è il bottone così come lo si vede in firefox, l'immagine di destra è il pulsante originale.

Devo aggiungere qualcosa nel codice css?

[Kiantis]

per togliere il bordo puoi usare border: none;

[maxcondor]

e per creare un effetto rollover al passaggio del mouse?

[Kiantis]

mettend nel selettore ":hover" settando le differenti proprietà per quello stato
(es, un'altra immagine ecc.)

[maxcondor]

ho utlizzato border:none, con ff tutto ok ma con ie l'immagine del pulsante non compare....

[Kiantis]

Forse lo tratta come default inline?
Se lo metti come display: block; forse prende l'altezza.

[maxcondor]

ho sistemato così:

background:url(../images/btn_trova.jpg) center no-repeat

[fmortara]

così no??

<input type="image" src="/img/file.gif" onclick="trova();" tabindex="13" title="effettua una ricerca" >

[maxcondor]

non riesco però a realizzare l'effetto rollover sul pulsante

[Kiantis]

Occhio che i percorsi definiti nei css sono relativi ai file css in cui scrivi.
Hai usato il selettore :hover?