[Web2.0] a hover visited ognuno fa come vuole :(

Marcello Vezzelli marcello a vezz.it
Gio 22 Feb 2007 12:11:01 CET


Ciao a tutti,
capitolo secondo... se arrivate in fondo avete una pazienza sconfinata :D

Questo benedetto menu in realtà è fatto di link.
http://cs.vezz.it/menu/test.html

E qui mi si apre l'anarchia dei browser ancora :(

Lo stile predefinito degli a è questo:

a {
    color: #FF6600;
    text-decoration: underline;
}
a:hover {
    color: #FF6600;
}
a:visited:hover {
    color: #FF6600;
}
a:visited {
    color: #FF6600;
}

Nel menu invece i link devono essere grigi. In particolare, menuitem
deve essere sottolineato.
Per cui ho scritto

.menuitem a {
  color: #999999;
    text-decoration: underline;
}

E così correggo gli a contenuti in tutti i menuitem.

Ora, , menusub deve essere grigio non sottolineato.
Per cui ho scritto

.menusub a {
  color: #999999;
    text-decoration: none;
}

Poi... la voce di menu selezionata ha uno stile diverso, .menuitemsel,
per cui devo fare la stessa cosa anche per le classi selezionate.
Per cui scrivo

.menuitemsel a {
  color: #FF6600;
    text-decoration: underline;
}

e poi

.menusubsel a {
  color: #FF6600;
  text-decoration: none;
}

Così c'è tutto.
In IE7 perfetto, FF2 quasi perfetto, Opera 9.1 perfetto...
Il quasi perfetto in FF2 è che non funziona correttamente l'hover sui
link normali e visitati. Dovrebbe diventare arancione, ma rimane grigio.

IE6 è quello che rompe di più i coglioni di nuovo :(
Per i link visitati utilizza lo stile di default... quindi rimangono
tutti arancioni una volta cliccati.
L'hover funziona correttamente come in IE7.

Morale... per ottenere un comportamento omogeneo su tutti i browser, ho
dovuto specificare PER OGNI classe, menuitem, menusub, menuitemsel,
menusubsel TUTTI gli attributi di a in questo modo...

.menusub a {
  color: #999999;
    text-decoration: none;
}
.menusub a:visited {
  color: #999999;
    text-decoration: none;
}
.menusub a:visited:hover {
  color: #FF6600;
    text-decoration: none;
}
.menusub a:hover {
  color: #FF6600;
    text-decoration: none;
}

Lasciamo stare che posso raggruppare quelli uguali.

Ma è normale dover operare in questo modo?

Saluti
Marcello






Maggiori informazioni sulla lista Web2.0