Menu a linguette che scompare con IE

[cavicchiandrea]

Ciao non riesco a cavarci fuori i piedi con questo codice che funziona perfettamente con Firefox ma non ne vuole sapere d'andare con IE 6
codice:

	    function MostraArea(tab){
		var Linguette = document.getElementsByTagName("li")
		for(var i=0; i<Linguette.length; i++){
		if(tab == Linguette[i].id){
		document.getElementById(tab).className='selected';
		document.getElementById(tab.toUpperCase()).style.display='inline';
		}
		else if(Linguette[i].value!=0){
		document.getElementById(Linguette[i].id).className='';
		document.getElementById(Linguette[i].id.toUpperCase()).style.display='none';
		}
	}

}

Cosa fa: seleziona la linguetta corrispondente e visualizzare il div associato (se presente)

body:

<a name="commenti"></a><a name="form_commento"></a>
<div class="sotto"><div class="shadetabs">
<ul><li id="uno" value="1" class="selected">[img]/dblog/template/standard/gfx/articolo.gif[/img]Fotografia (5)

<li id="due" value="1">[img]/dblog/template/standard/gfx/commenti.gif[/img]Commenti
<li id="tre" value="0">[img]/dblog/template/standard/gfx/storico.gif[/img]Sezioni<li id="quattro" value="1">
[img]/dblog/template/standard/gfx/stella.png[/img]Vota[/list]
</div>
</div>

css:

.shadetabs{
border-bottom: 1px solid gray;
/* width: 90%; width of menu. Uncomment to change to a specific width */
margin-bottom: 1em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(gfx/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(gfx/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

Il link al sito in sviluppo

Attendo vostri consigli o se avete un codice simile funzionate con IE 6 ve ne sarei grato.
Ciao e grazie a tutti.

[cavicchiandrea]

Premessa:
Come avevo postato il "li" li assegnavo cosi:

<li id="uno" value="1" class="selected">[img]/dblog/template/standard/gfx/articolo.gif[/img]Fotografia (5) id=due", id="tre", etc.....

E div associati alla linguetta li assegnavo cosi:

<div id="UNO" style="display:none">contenuto div......................</div><div id="DUE" style="display:none">contenuto div......................</div> etc....

Per intenderci li nominavo uguale alla id della linguetta ma in MAIUSCOLO (credendo che tutti i browser fossero "case sensitive") ebbene IE6 no, ora passiamo alla soluzione.
ho rinominato i div uguali ma con trattino d'avanti cosi:

<div id="_uno" class="Disattivato">contenuto div......................</div><div id="_due" class="Disattivato">contenuto div......................</div> etc....

e ho creato due classi, poi ho modificato lo script cosi:

		function MostraArea(tab){
		var Linguette = document.getElementsByTagName("li")
		for(var i=0; i<Linguette.length; i++){
		if(tab == Linguette[i].id){
		document.getElementById(tab).className='selected';
		document.getElementById("_"+tab).className='Attivo';
		}
		else if(Linguette[i].value!=0){
		document.getElementById(Linguette[i].id).className='';
		document.getElementById("_"+Linguette[i].id).className='Disattivato';
		}
	}

}

Cosi funzina tutto benissimo sono diventato matto per colpa di IE6