(sito matrimonio) "button" tagliato su firefox!

[alrrendita]

Salve a tutti!
Ho un problema con il mio sito, non sono un esperto di html e css e il 90% del mio sito l'ho creato con un CMS. è un sito sul matrimonio.

Ho però inserito parti di codici a mano e ho un problema con Firefox, due immagini di due "button" vengono tagliati a metà! Ho allegato un immagine qui sotto per far vedere il problema.


problema-firefox-css.jpg

Con gli altri browser si visualizza tutto correttamente.

[Mich_]

Ho dato un'occhiata al sito.

Non e` facile seguire il tutto, perche` ci sono molti file CSS e non li ho guardati tutti.
Ho notato pero` che usi dei posizionamenti assoluti, e probabilmente questo ti da` quei problemi.

Se puoi eliminare tutti i posizionamenti, probabilmente risolvi questo problema ed anche altri che salteranno fuori non appena provi ad aumentare un po' la dimensione del carattere o hai una risoluzione diversa da quella che usi sul tuo PC

[fcaldera]

il tuo bottone è una sprite a due stati alta 64px.
si suppone quindi che un singolo stato del pulsante sia alto 32px
ma nei css il tuo input è alto 24px.
quindi hai 8px tagliati.

[alrrendita]

Grazie a entrambi per la risposta.

Il problema è che se metto un altezza di 32 come ha suggerito fcaldera viene tagliato da chrome e internet explorer mentre se lascio 24 px viene tagliato da firefox....non capisco il perchè.
Vi posto i codici css dei due button:

#button
        {
            margin-top:1px;margin-left:1px;
            text-align: center;
            border:none;
            display:block;
            overflow:hidden;
            cursor:pointer;
            width:142px;
            height: 22px;
            color:green;
            font-size:16px;
            background: transparent url(files/accesso-aziende.png) no-repeat;
        }
        #button:hover
        {
            background-position:0 -30px;
        }



       #but
        {   margin-top:28px;margin-left:131px;text-align: center;border:none;display:block;overflow:hidden;cursor:pointer;
            width:140px;height: 24px;color:green;font-size:16px;
            background: transparent url(files/cerca.png) no-repeat;
        }
        #but:hover
        {
            background-position:0 -32px;
        }

[alrrendita]

Ricapitolando il problema è:
- se metto "height: 22px;" l'immagine viene visualizzata correttamente con Chrome e Internet explorer ma viene tagliata con Firefox
- se metto "height: 30px;" l'immagine viene visualizzata correttamente con Firefox ma viene allungata con Chrome e Internet explorer

Qualcuno sa darmi una mano?

[fcaldera]

il problema è il fatto di aver scelto un <input>: è difficile da stilare in modo uniforme come hai potuto vedere. Usa un elemento <button> invece

[alrrendita]

Grazie mille! in effetti con button funziona in modo uniforme sui browser!!!!! :-)

Ho risolto!