View Full Version : [CSS]Menu incompatibile con IE
Mattyfog
16-07-2010, 18:49
Lavoro con Joomla ma questo non importa più di tanto poichè parliamo di semplice css.
Sul sito http://lnx.passiontattoostudio.com/shop/ il menu categorie di virtuemart è visualizzato correttamente da firefox ma non da IE (lasciamo stare gli altri problemi di incompatibilità).
Anche usando un hack di IE, mi spiegate cosa dovrei cambiare? Perchè non so proprio quale sia il problema.
Codice css:
/*menu categorie prodotti di virtuemart*/
.moduletable #wrap #menu {
padding-top: 42px;
background-image: url(../images/categorie.jpg);
background-position: top left;
background-repeat: no-repeat;
}
.moduletable #wrap #menu table {
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
margin-left: 5px;
}
.moduletable #wrap #menu table tbody tr {
background-image: url(../images/others/punto-ori.gif);
background-position: left bottom;
background-repeat: repeat-x;
width: 133px;
margin: 0px 5px 0px 5px;
padding: 2px;
display: block;
line-height: 30px;
}
.moduletable #wrap #menu table tbody tr:last-child {
background-image: none;
width: 133px;
margin: 0px 5px 0px 5px;
padding: 2px;
display: block;
line-height: 30px;
}
.moduletable #wrap #menu table tbody tr td {
background-image: url(../images/others/ico_left_menu.gif);
background-position: 0px 7px;
background-repeat: no-repeat;
padding: 0px 0px 0px 7px;
display: block;
}
.moduletable #wrap #menu table tbody tr td a {
display: block;
line-height:14pt;
font-size: 15px;
font-family: Tahoma;
letter-spacing: 0pt;
line-height: 14pt;
}
Intanto inizio col dire che con IE8 va bene, quindi il problema si restringe.
Il tuo problema è che è tutto il div con id "sidebar_left" a scazzare la posizione, e la parte di foglio di stile che hai postato non serve a nulla per correggere il problema.
Aggiungi in template.css:
#sidebar_left {
...
clear: left;
}
Mattyfog
22-07-2010, 09:35
Ho inserito questa regola ma non è cambiato nulla. Come risolvo?
Ho inserito questa regola ma non è cambiato nulla. Come risolvo?Guarda che funziona, ora :D
Mattyfog
22-07-2010, 09:55
Si ma guarda su firefox, è ben diverso.
Si ma guarda su firefox, è ben diverso.Ma dove?!?
IE7
http://img32.imageshack.us/img32/5700/passionshopie7.th.jpg (http://img32.imageshack.us/i/passionshopie7.jpg/)
IE8
http://img443.imageshack.us/img443/7197/passionshopie8.th.jpg (http://img443.imageshack.us/i/passionshopie8.jpg/)
Firefox 3.6.7
http://img685.imageshack.us/img685/6519/passionshopff367.th.jpg (http://img685.imageshack.us/i/passionshopff367.jpg/)
Chrome 6
http://img820.imageshack.us/img820/4020/passionshopchrome6.th.jpg (http://img820.imageshack.us/i/passionshopchrome6.jpg/)
Mattyfog
22-07-2010, 10:41
C'è la lineetta bianca fra un link e un altro cosa che mi è stata imposta di mettere.
Allora, se vuoi aiuto cerca di essere più chiaro. Devi dire ESATTAMENTE cosa ti aspetti, magari con uno screenshot.
Di quali linette stai parlando? Dove? Quali link? Che aspetto devono avere? Come si devono comportare?
Ma poi IE quale versione, spero tu non voglia sviluppare per IE6 :mbe:
Mattyfog
22-07-2010, 13:21
Al momento parlo per il mio IE che è la versione 8.0.7600.16385 .
Io voglio che venga visualizzato esattamente come in firefox (sono chiaramente disposto ad usare i commenti condizionali per creare un foglio di stile apposito per IE).
Se guardate le immagini di MaxArt e più precisamente questa http://img685.imageshack.us/i/passionshopff367.jpg/ (quella di firefox) capirete come io voglio che venga visualizzato il menu.
Voglio che compaiano quelle lineette bianche fra un link e l'altro.
Io voglio che venga visualizzato esattamente come in firefox (sono chiaramente disposto ad usare i commenti condizionali per creare un foglio di stile apposito per IE).I commenti condizionali sono una barbarie che si usa solo come ultima risorsa :huh:
Trova qualcosa di meglio di un'immagine di sfondo per ricreare l'effetto di una riga separatrice. Perché non provi con un elemento <hr />?
Mattyfog
22-07-2010, 14:47
Perchè lavoro in joomla e vorrei non modificare il codice ma usare solo i css. E comunque non vedo niente di male nei commenti condizionali!
Mattyfog
23-07-2010, 11:12
Nessuna nuova idea?
Io una soluzione te l'ho data.
Non conosco Joomla, non sento il minimo interesse ad impararlo, quindi non vedo che problemi ci possano essere a modificarne il codice.
Mattyfog
24-07-2010, 10:19
Perchè vorrei evitare di modificare il codice ad ogni aggiornamento di Joomla. :D
wingman87
24-07-2010, 14:11
.moduletable #wrap #menu table tbody tr td {
background-image: url(../images/others/ico_left_menu.gif);
background-position: 0px 7px;
background-repeat: no-repeat;
border-top:1px solid white;
padding: 0px 0px 0px 7px;
display: block;
}
.moduletable #wrap #menu table tbody tr:first-child td {
border-top:1px solid black;
}
Usa border per fare i bordi al posto delle immagini di sfondo.
.moduletable #wrap #menu table tbody tr td {
background-image: url(../images/others/ico_left_menu.gif);
background-position: 0px 7px;
background-repeat: no-repeat;
border-top:1px solid white;
padding: 0px 0px 0px 7px;
display: block;
}
.moduletable #wrap #menu table tbody tr:first-child td {
border-top:1px solid black;
}
Usa border per fare i bordi al posto delle immagini di sfondo.L'avevo provato e stavo per proporglielo, ma non mi pare che esca benissimo :boh:
Occhio che :first-child non è accettato da IE6.
wingman87
24-07-2010, 15:14
In effetti non ho provato su IE perché non posso.
In sostanza dovrebbe restringere un po' le celle, così il bordo non prende tutta la larghezza del menu e l'effetto dovrebbe essere lo stesso. Su firefox infatti viene bene
Mattyfog
28-07-2010, 12:27
Funzionaaaa!
Unica cosa, mi sembra più pulito scrivere:
.moduletable #wrap #menu table tbody tr:first-child td {
border-top:none; }
anzichè:
.moduletable #wrap #menu table tbody tr:first-child td {
border-top:1px solid black;
}
Comunque ho scoperto che IE se ne sbatte della proprietà background inserita nel selettore [i].moduletable #wrap #menu table tbody tr[i] perchè anche scrivendo background: white; lo sfondo non cambia quindi non è la mia immagine di sfondo ad essere coperta da qualcos'altro ma è proprio che IE se ne frega della proprietà background.
Perchè? E' mica già impostata da qualche parte da joomla?
Funzionaaaa!
Unica cosa, mi sembra più pulito scrivere:
.moduletable #wrap #menu table tbody tr:first-child td {
border-top:none; }
Giusto, così è più chiaro e generale.
Comunque ho scoperto che IE se ne sbatte della proprietà background inserita nel selettore [i].moduletable #wrap #menu table tbody tr[i] perchè anche scrivendo background: white; lo sfondo non cambia quindi non è la mia immagine di sfondo ad essere coperta da qualcos'altro ma è proprio che IE se ne frega della proprietà background.
Perchè?Perché alla Microsoft hanno deciso così, che ci vuoi fare :O
Il background lo imposti o nella tabella o nelle singole celle.
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.