Firefox, anomalie con rollover e css

Di: TeraBIT | 26/09/2020 17:18:57
salve a tutti, ho creato dei rollover inserendo degli eventi "onmouse" nei div in modo che al passaggio del mouse(over e out) avvenga un cambio di classe(e quindi di immagine), l'effetto funziona benissimo sia in opera che explorer, tuttavia in firefox si comporta in modo strano, andando da una pagina all'altra il rollover a volte effetua il cambio e altre no, potete trovare il sito quì :
http://www.xcode.altervista.org/TeraBIT/
questo è il codice del div contenente il menù:
<!-- Commento aggiunto per non interferire con il codice della pagina del forum di 001design.it.

<div id="navigation">
<ul>
<li class="home" onmouseover="this.className='homeOver'" onmouseout="this.className='homeOut'"><a href="../home.htm"></a></li>
<li class="profilo" onmouseover="this.className='profiloOver'" onmouseout="this.className='profiloOut'"><a href="../sezioni/profilo.htm"></a></li>
<li class="cv" onmouseover="this.className='cvOver'" onmouseout="this.className='cvOut'"><a href="../sezioni/cv.htm" onmouseover="class="threeOver""></a></li>
<li class="portfolio" onmouseover="this.className='portfolioOver'" onmouseout="this.className='portfolioOut'"><a href="../sezioni/portfolio.htm"></a></li>
<li class="contatti" onmouseover="this.className='contattiOver'" onmouseout="this.className='contattiOut'"><a href="../sezioni/contatti.htm"></a></li>
<li class="links" onmouseover="this.className='linksOver'" onmouseout="this.className='linksOut'"><a href="../sezioni/links.htm"></a></li>
</ul>
</div>

questo il css dell'home page relativo al menù(per ogni sezione assegno la stessa immagine di "stato premuto"(la n°4) a tutte e 4 le class in modo che a qualunque passaggio del mouse l'immagine resti la stessa e segnali la sezione in cui ci si trova)

.home {background-image: url(../BTim/home/home4.gif);}
.homeOver {background-image: url(../BTim/home/home4.gif);}
.homeOut {background-image: url(../BTim/home/home4.gif);}
.profilo {background: url(../BTim/profilo/profilo1.gif)}
.profiloOver {background: url(../BTim/profilo/profilo2.gif)}
.profiloOut {background: url(../BTim/profilo/profilo3.gif)}
.cv {background-image: url(../BTim/cv/cv1.gif);}
.cvOver {background-image: url(../BTim/cv/cv2.gif);}
.cvOut {background-image: url(../BTim/cv/cv3.gif);}
.portfolio {background: url(../BTim/portfolio/portfolio1.gif)}
.portfolioOver {background: url(../BTim/portfolio/portfolio2.gif)}
.portfolioOut {background: url(../BTim/portfolio/portfolio3.gif)}
.contatti {background: url(../BTim/contatti/contatti1.gif)}
.contattiOver {background: url(../BTim/contatti/contatti2.gif)}
.contattiOut {background: url(../BTim/contatti/contatti3.gif)}
.links {background: url(../BTim/links/links1.gif)}
.linksOver {background: url(../BTim/links/links2.gif)}
.linksOut {background: url(../BTim/links/links3.gif)}

Fine commento aggiunto per non interferire con il codice della pagina del forum di 001design.it. -->
un ultima domanda, sia in opera che in firefox il posizionatmento tramite css funziona benissimo, mentre in explorer tutti gli elementi della "cella contenuti" sono spostati in basso invece che in alto, perchè?

Risposte



A parte che la classe andava applicata alle immagini e non ai DIV, francamente un menu di navigazione come l'hai progettato tu va a rovinare quel tanto di buono che pare di vedere a occhio nel resto del sito.
Innanzitutto non va d'accordo con le buone regole di progettazione... un menu a immagini è penalizzante dal punto di vista dei motori di ricerca perchè non trovano link utili da indicizzare.
In secondo luogo dal punto di vista grafico fa a pugni con la dimensione dei caratteri utilizzati nel corpo.
In terzo luogo e sempre come consiglio amichevole e ti prego di non prendertela, non è cosa carina far sapere ai visitatori del tempo che hai impiegato e quanti sforzi abbia fatto per fare il sito. Ti assicuro che non gliene frega niente. Usare parole come "c...te" in maniera arbitraria, senza aver pensato ai contenuti per i quali si suppone ti sia sforzato tanto, servono solo a vanificare il tuo lavoro...

Di: Gian Paolo | 26/09/2020 17:18:57