[CSS]Menu incompatibile con IE

[Mattyfog]

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;
	}

[MaxArt]

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]

Ho inserito questa regola ma non è cambiato nulla. Come risolvo?

[MaxArt]

Originariamente inviato da Mattyfog

Ho inserito questa regola ma non è cambiato nulla. Come risolvo?

Guarda che funziona, ora

[Mattyfog]

Si ma guarda su firefox, è ben diverso.

[MaxArt]

Originariamente inviato da Mattyfog

Si ma guarda su firefox, è ben diverso.

Ma dove?!?

IE7


IE8


Firefox 3.6.7


Chrome 6

[Mattyfog]

C'è la lineetta bianca fra un link e un altro cosa che mi è stata imposta di mettere.

[MaxArt]

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?

[WarDuck]

Ma poi IE quale versione, spero tu non voglia sviluppare per IE6

[Mattyfog]

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.

[MaxArt]

Originariamente inviato da Mattyfog

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

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]

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]

Nessuna nuova idea?

[MaxArt]

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]

Perchè vorrei evitare di modificare il codice ad ogni aggiornamento di Joomla.

[wingman87]

	.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.

[MaxArt]

Originariamente inviato da wingman87

	.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
Occhio che :first-child non è accettato da IE6.

[wingman87]

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]

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?

[MaxArt]

Originariamente inviato da Mattyfog

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
Il background lo imposti o nella tabella o nelle singole celle.