Autore Topic: CSS e background-image - problemi con firefox (Letto 7163 volte)

etranger · « **il:** 14 Febbraio 2005 10:33:38 »

Ho un problema su firefox legato alla gestione delle immagini con css.
Questi comandi permettono a un menu di cambiare immagine al passaggio del mouse, il tutto funziona correttamente quando viene visualizzato con internet explorer, mentre con firefox l'immagine viene spostata verso il basso.
Ho provato anche ad inserire nel css gli altri parametri relativi al comando background-image ma senza ottenere risultati.

Codice: [Seleziona]

.menuimmagine1{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:link{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:visited{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:hover{ background-image : url(images/home_titolo_sx1_chiaro.gif);}

A questo punto mi chiedo se devo continuare a sbatterci la testa oppure se questo è un problema riconosciuto da firefox e perciò non risolvibile.

Molte grazie
EDIT lucasali: ho racchiuso il codice tra i tag code. Per una maggiore leggibilità ti consiglio di usare sempre il tag code quando posti del codice.

cecca · « **Risposta #1 il:** 14 Febbraio 2005 10:41:47 »

Sposto nel forum più attinente al problema...

lucasali · « **Risposta #2 il:** 14 Febbraio 2005 12:38:35 »

potresti postarci li link ad una pagina d'esempio?

ciao. Luca

etranger · « **Risposta #3 il:** 14 Febbraio 2005 12:55:11 »

Citazione da: lucasali

potresti postarci li link ad una pagina d'esempio?

ciao. Luca

Purtroppo sto ancora lavorando in locale e non ho ancora pubblicato il sito.
Ho Effettuato però delle ricerche in internet, e mi sto convincendo sempre di + che sia un "difetto"di mozilla, in quanto ho trovato altre persone che hanno il mio stesso problema e che purtroppo non lo hanno risolto.

mas_160 · « **Risposta #4 il:** 14 Febbraio 2005 14:10:37 »

Prova così, a me funziona correttamente.

Codice: [Seleziona]


<head>
.
.
.
<style>
	a:link {text-decoration: none; color: blue}
	a:visited {text-decoration: none; color: blue}
	a:hover {text-decoration: none; color: blue}
	.c1 {background: url(images/bottone_off.png) no-repeat center; text-align: center; font-family: arial; font-size: 9pt; color: white; cursor: hand; padding-top: 1px}
	.c2 {background: url(images/bottone_on.png) no-repeat center; text-align: center; font-family: arial; font-size: 9pt; color: blue; font-weight: bold; cursor: hand padding-top: 1px}
</style>
.
.
.
</head>
<body>
.
.
.
<table border="0" cellpadding="0" cellspacing="0" width="85">
<tr>
<td class="c1" onmouseover="this.className='c2'" onmouseout="this.className='c1'" onclick="document.location.href='linkallapaginachevuoi' ">
testo link
</td>
</tr>
</table>
.
.
.
</body>

Ovviamente cambia ciò che devi cambiare (colori, nomi delle immagini, link, etc.)

etranger · « **Risposta #5 il:** 14 Febbraio 2005 15:42:49 »

è un metodo un pò diverso...
Io da una include richiamo tramite questo codice...

Codice: [Seleziona]

<tr><td width="150" height="20" valign="top" border="0"><a class="menuimmagine1" href="#" title="Servizio non disponibile"><img src="../images/1x1_trasparente.gif" border="0" WIDTH="150" HEIGHT="20"></a><br><img src="../images/1x1_bianco.gif" border="0" WIDTH="150" HEIGHT="4"></td></tr>

la voce menuimmagine1 dal foglio di stile,

Codice: [Seleziona]

.menuimmagine1{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:link{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:visited{ background-image : url(images/home_titolo_sx1.gif);}
.menuimmagine1:hover{ background-image : url(images/home_titolo_sx1_chiaro.gif);}

che utilizzando i vari stati possibili fa si che quando passo il mouse sull'immagine venga richiamata la gif "home_titolo_sx1_chiaro.gif", che produce l'effetto di cambio immagine da" home_titolo_sx1.gif".
con I.E. funziona perfettamente, il problema dello spostamento dell'immagine verso il basso lo da solo con mozilla.
da notare che se il richiamo al foglio di stile viene spostato dal "href" all'interno della cella

Codice: [Seleziona]

<tr><td width="150" height="20" valign="top" border="0" class="menuimmagine1"><a  href="#" title="Servizio non disponibile"><img src="../images/1x1_trasparente.gif" border="0" WIDTH="150" HEIGHT="20"></a><br><img src="../images/1x1_bianco.gif" border="0" WIDTH="150" HEIGHT="4"></td></tr>

il problema non si presenta.

shaitan · « **Risposta #6 il:** 14 Febbraio 2005 16:21:12 »

Così per curiosità prova a dichiararli con il path completo

Codice: [Seleziona]

a.menuimmagine1 { etc etc}

anche se è all'interno di un div dichiarare cmq tutto

Codice: [Seleziona]

div#menu a.menuimmagine1 { etc etc}

so che è una fesserie perchè è la stessa cosa, ma a volte mi ha risolto problemi (anche se lì li avevo con ie)

lucasali · « **Risposta #7 il:** 14 Febbraio 2005 16:35:02 »

io non ho mai affrontato problemi di questa natura ma hai provato a dichiarare anche il bordo dell'immagine nel css?

etranger · « **Risposta #8 il:** 14 Febbraio 2005 17:33:58 »

Si, ho gia fatto varie prove, (anche escludendo bordi e spazi dal css) ma il problema rimane,

flod · « **Risposta #9 il:** 15 Febbraio 2005 10:19:52 »

Credo che l'unica soluzione sia pubblicare da qualche parte una pagina con dentro solo quel pezzo di codice...