un altro problema con internet explorer e le sottoclassi

[cloud_strife]

salve gente, vorrei farvi vedere un sito su cui sto lavorando e che mi sta creando parecchi grattacapi...
l'indirizzo è questo:
http://www.spaghettistudio.com/sl/index.php
come vedete c'è ancora molto da fare ma non è quello il punto... il problema riguarda il menù a sinistra fatto con i rollover.

Se state usando firefox o altri browsers che non siano IE vedrete un'immagine di sfondo per i link, che al passaggio del mouse si sposta mostrando l'altra parte colorata... il codice del menù è questo:

<div id="menu">
<ul>[*]<mh>Home</mh>[*]<if>Chi sono</if>[*]<bl>Blog</bl>[*]<nl>Newsletter</nl>[*]<cn>Contatti</cn>[/list]
</div>

nel foglio di stile ho associato a "ul" e "li" i parametri uguali per tutte le voci del menù, come le dimensioni e il colore del testo, l'altezza di ogni link...
però utilizzare la stessa immagine per tutti i link mi scocciava.
Se usate firefox vedrete che ad ogni rollover è associaa un immagine diversa, con un icona particolare a seconda del link (la casa per il link home, la lettera per il link "newsletter" e via dicendo). Non sapevo come fare e così ho provato a creare dei tag specifici per ogni rollover (se guardate il codice tra i tag[*] ci sono anche altri tag come <nl></nl>. Così la struttura sarà tipo[*]<nl><link></nl>
poi al tag nl associo l'immagine di rollover specifica... è una cosa ingegnosa no? ecco il codice

#menu {
	width: 200px;
	}
	
#menu ul {
	list-style: none;
	margin-top:0;
	margin-bottom:10px;
	margin-left:0;
	margin-right:0;
	padding: 0;
	}
	
#menu li a, #menu li a:link, #menu li a:visited {
	font-family:Verdana, Tahoma, Arial, Sans-Serif;
	font-size:12px;
	font-weight:bold;
	color: #000000;
	height: 20px;
	letter-spacing:1px;
	text-decoration:none;
	display: block;
	padding: 6px 0 0 18px;
	}
#menu li a:hover, #menu li a:active {
	color: #FFFFFF;
	padding: 6px 0 0 18px;
	}

#menu mh a, #menu mh a:link, #menu mh a:visited {background:#FFF url(img/mh.gif);}
#menu mh a:hover, #menu mh a:active {background:#FFF url(img/mh.gif) 0 -26px;}

#menu if a, #menu if a:link, #menu if a:visited {background:#FFF url(img/minfo.gif);}
#menu if a:hover, #menu if a:active {background:#FFF url(img/minfo.gif) 0 -26px;}

#menu bl a, #menu bl a:link, #menu bl a:visited {background:#FFF url(img/mbl.gif);}
#menu bl a:hover, #menu bl a:active {background:#FFF url(img/mbl.gif) 0 -26px;}

#menu nl a, #menu nl a:link, #menu nl a:visited {background:#FFF url(img/mnl.gif);}
#menu nl a:hover, #menu nl a:active {background:#FFF url(img/mnl.gif) 0 -26px;}

#menu cn a, #menu cn a:link, #menu cn a:visited {background:#FFF url(img/mcn.gif);}
#menu cn a:hover, #menu cn a:active {background:#FFF url(img/mcn.gif) 0 -26px;}

il tutto funziona su firefox... ma su ie non mi vede gli altri tag.. infatti mi funzionano le assegnazioni che ho dato a "ul" e "li" ma non tutti i tag per le immagini di rollover... controllate voi stessi.

Vorrei sapere se ho sbagliato qualcosa o se comunque c'è un altro modo funzionante su IE per fare quello che voglio, ossia dare a ogni link un immagine diversa di rollover...

spero di essere stato abbastanza chiaro e spero che qualcuno con un pò di pazienza abbia letto il post (un pò pesantuccio devo dire )

grazie a tutti in anticipo

[cloud_strife]

oh la la tutte queste letture e nessuna che sappia aiutarmi?
dai vi pregooooooooooo

[andrea.paiola]

Non puoi inventarti dei tags così...
i tags che puoi usare son quelli scritti nelle specifiche.
Se ci dici il tipo di documento, ti diciamo i tags che puoi usare.
Comunque usa i selettori (per esempio id e class) per assegnare le proprietà CSS.

[cloud_strife]

eh ma non conosco benissimo la sintassi qualcuno mi potrebbe fare un esempio pratico per implementare la funzione che mi serviva?
e poi su firefox ha funzionato... hahah
grazie ancora

[Lisa09]

Prova a sostiruire come segue:

per il css

#mh a, #mh a:link, #mh a:visited {background:#FFF url(img/mh.gif);}
#mh a:hover, #mh a:active {background:#FFF url(img/mh.gif) 0 -26px;}

#if a, #if a:link, #if a:visited {background:#FFF url(img/minfo.gif);}
#if a:hover, #if a:active {background:#FFF url(img/minfo.gif) 0 -26px;}

#bl a, #bl a:link, #bl a:visited {background:#FFF url(img/mbl.gif);}
#bl a:hover, #bl a:active {background:#FFF url(img/mbl.gif) 0 -26px;}

#nl a, #nl a:link, #nl a:visited {background:#FFF url(img/mnl.gif);}
#nl a:hover, #nl a:active {background:#FFF url(img/mnl.gif) 0 -26px;}

#cn a, #cn a:link, #cn a:visited {background:#FFF url(img/mcn.gif);}
#cn a:hover, #cn a:active {background:#FFF url(img/mcn.gif) 0 -26px;}

e per l'html:

<ul>
<li id="mh">Home
<li id="if">Chi sono
<li id="bl">Blog
<li id="nl">Newsletter
<li id="cn">Contatti[/list]

Spero di aver capito il problema correttamente e soprattutto di avertelo risolto :P

[cloud_strife]

si RISOLTO!! RISOLTO!!!!!

grazie mille mi hai tolto da un bel casino (come si dice dalle mie parti )