[Chrome] problemi con icone su <li>

[STOIMPAZZENDO]

ciao a tutti! .. ho questo codice :

#menu li#home {
background:transparent url(img/ico_home_a.png) no-repeat scroll 0 50%;
height:33px;
display:inline;
}
#menu li#home:hover {
background:transparent url(img/ico_home_h.png) no-repeat scroll 0 50%;
height:33px;
display:inline;
}


che richiama un icona che cambia colore con rollover ... su firefox ed ie è ok, ma quando apro la pagina con Chrome vedo le iconcine dimezzate, come se non ci fosse l'height impostato.. cosa puo' essere?

[Mich_]

Io vedo due problemi (ma non so se sono quelli che danno il problema su chrome):

1. non hai definito margini e padding specialemnte i sinistri (i default dei browser sono diversi, per cui conviene sempre definirli esplicitamente

2. hai dato display:inline, mentre hai definito height: chiaramente se definisci height vuoi che i tuoi[*] siano di tipo blocco, e non puoi quindi definirli inline.

[Mich_]

Ho visto la pagina (che hai mandato in pvt).

Io vedo ben altri problemi, di tipo sintattico, semantico e di usabilita`, mentre non mi fari troppi problemi con un browser che e` ancora in versione beta. Comunque una pagian fatta bene si vede been su qualsiasi browser standard, e a quanto si dice chrome e` molto buono sul lato degli standard.

Segnalo solo gli errori maggiori che vedo.

1. Mancano i title nei link: in particolare nelle immagini delle lingue questo significa che chi non carica le immagini o chi non conosce le bandiere non sa quale bottone deve premere per avere la lingua voluta. Questo e` un grave errore di usabilita`

2. Mescoli formattazione HTML e CSS: questo puo` dare problemi di interpretazione ai browser, dato che possono liberamente seguire il CSS o l'HTML (ed in effetti alcuni danno precedenza al CSS altri all'HTML). Devi eliminare tutti gli attributi di formattazione

#menu ul {
display:block;
list-style-type:none;
margin:5px 1px 2px; 
}
#menu li {
display:inline;   /* perche` inline? NON lo devi usare */
                        /*manca il float: left; */
list-style-type:none;
padding:12px;  /* bastano 12 px per l'immagine? Mi sembrano pochi */
                        /* manca il margin */
height:33px;
}
#menu a {
color:#FFFFFF;
font-family:century gothic;
font-size:12px;
font-weight:bold;
margin-left:27px;
text-decoration:none;
                      /* manca il display: block; */
                      /* manca width: 100%; height: 100%;
}

#menu a:hover { ... }
#menu li#home:hover { ... }  (e tutti gli altri similmente)
Questi due sono in contraddizione: in pratica l'hover del mouse dovrebbe agire su due oggetti: il[*] e l'<a>, cosa che potrebbe non succedere

Inoltre il rollover non conviene farlo con due immagini diverse: conviene agire sul position di un'unica immagine. Vedi ad esempio: Menu grafici con rollover e preload via CSS e Fast Rollovers Without Preload oppure Bottoni con rollover flessibili

Comunque se vuoi fare pagine moderne, devi passare a XHTML Strict, e creare codice valido, tutto il resto ti espone a problemi del tipo che hai segnalato

[STOIMPAZZENDO]

grazie adesso provo

[STOIMPAZZENDO]

ottimo, il problema era quel cavolo di display:inline al posto del float:left ^.^
grazie mille.
ciao!

[STOIMPAZZENDO]

solo che adesso mi si "uccide" ie6