Controllo Css e Firefox 4

[Aires]

Ciao a tutti, avrei un problemino.
Ho una pagina scritta in php nella quale ho un menu a navigazione composto da diversi Div, specificati tramite Css. Inoltre ho uno script in Javascript che permette la navigazione tra i vari div. La pagina consiste in due parti, un menu sopra orizzontale con i vari div da scegliere e quando si sceglie nella parte sottostante appare il div selezionato e ci mostra i dati. Ha sempre funzionato, con tutti i browser... Ora dopo aver messo Firefox 4 di colpo quando cambio div fa una cosa particolare.

Fin'ora quando cambiavo voce dal menu, la nuova andava a sostituire la vecchia cosi vedevo il menu e sotto il menu la voce scelta, ogni volta che cambio voce cambia il contenuto sotto. Ora il problema è diverso, quando cambio voce dal menu, la nuova scelta si apre sotto alla vecchia.

In pratica invece di avere questa struttura:

Menù
..
Scelta1 oppure Scelta 2 (mai assieme)

Mi appare

Menu
..
Scelta 1
... 
Scelta 2

Non so perchè mi apre la nuova voce sotto la precedente

Ecco il codice del CSS utilizzato:

<style type="text/css">
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222}
div.tabpanel {width:100%;margin-bottom:2em; margin-left: auto; margin-right: auto;}
div.tabpanel div.tab{border: 0px solid #D7D7D7;border-top:0; margin-left: auto; margin-right: auto;}
div.tabpanel div.tab{padding: 10px; margin-left: auto; margin-right: auto;}
div.tab h2{width:100%;margin: 0;padding:0.3em 0;font-size:150%;color:white}
div.tab p{margin-top:0}
ul.tabnav{width: 100%;overflow:hidden;list-style: none;
         margin: 0;padding:0;background:url(line.png) repeat-x bottom}
ul.tabnav li{float: left;margin: 0 0 0 0.5em;padding: 0}
ul.tabnav a{float: left;padding: 0 0 0 0.8em;
        background: url(tab.png) no-repeat top left;
        text-decoration: none;color: #41FF32;
        border-bottom: 1px solid #D7D7D7}
ul.tabnav span{float: left;padding: 0.6em 0.8em 0.6em 0;
        background: url(tab.png) no-repeat top right;cursor: pointer}
ul.tabnav a.active,ul.tabnav a:hover{
        background: url(tab2.png) no-repeat top left;
        border-bottom:1px solid #FFF}
ul.tabnav a.active span,ul.tabnav a:hover span{
        background: url(tab2.png) no-repeat top right;color: white} 
</style>

E se necessario ecco il Javascript

<script type="text/javascript">
function makeTabs(oCont,oNav,nDefault) {
    var nActive = nDefault || <?if(!isset($_POST['pagina'])){ echo '2'; }else{ echo $_POST['pagina'];}?>, aTabs = [], aLnks = oNav.getElementsByTagName("a"), aChilds = oCont.childNodes;
    function show(number) {
        for (var i = 0; i < aTabs.length; i++) {
            aTabs[i].style.display = i + 1 === number ? "block" : "none";
            aLnks[i].className = i + 1 === number ? "active" : "";
        }
    }
    for (var i = 0; i < aChilds.length; i++) {
        if (aChilds[i].className === "tab") { aTabs.push(aChilds[i]); }
    }
    show(nActive);
    function change() {
        show(parseFloat(this.id.substr(this.id.search(/d/))));
        return(false);
    }
    for (var i = 0; i < aLnks.length; i++) {
        aLnks[i].id = "tabLnk" + String(i + 1);
        aLnks[i].onclick = change;
    }
}


</script>

Grazie a tutti!

[ResianTaxidrive]

hai mica un link diretto?

[Aires]

No purtroppo

Se serve i div li richiamo cosi

<ul id="tabcont1-nav" class="tabnav">[*]<span>Pag 1</span>[*]<span>Pag 2</span>[*]<span>Pag 3</span>[*]<span>Pag 4</span>[/list]
<div id="tabcont1" class="tabpanel">
<div id="tab1" class="tab">
...
</div>

[ResianTaxidrive]

la larghezza del tabcont1 da chi viene settata? da js? quanto viene larga?

[Aires]

Ah non avevo notato, non è settata.
Oltre a quello qualche idea su che può influenzare?

Ps. per modificarla devo mettere questo:
div.tabcount{width:100%;margin-bottom:2em;}

[ResianTaxidrive]

penso che sia il contenitore che tiene i vari pannelli con i contenuti che non è largo abbastanza.
Oppure potrebbe essere che è troppo alto e mostra anche il pannello successivo. Immagino che il contenuto dei pannelli sia variabile in altezza; è come se il js non calcolasse correttamente la dimensione dei pannelli.

Hai usato una libreria jquery?

[Aires]

Non ho usato null'altro rispetto al codice postato, purtroppo non è di mia scrittura. Avevo chiesto una mano sul forum tempo fa e mi avevano dato una pagina con grossomodo questo codice, ho ritoccato poche cose e questo è il risultato. Sui vari browser va, a parte Firefox 4.

Potrei provare a determinarne l'altezza e tutto se avete pazienza di indicarmi qualche suggerimento, tuttavia la voce che viene aperta non vorrei abbia l'altezza del 100% in quanto spesso necessito di scorrere la pagina

[ResianTaxidrive]

usi firebug?

[Aires]

Emh, l'ho installato appostiamente ma non ci ho capito nulla!

[ResianTaxidrive]

Spendi due minuti per capire come fuziona perchè è utilissimo.
clicchi col tasto dx del mouse su un elemento qualsiasi della pagina a poi clicchi "analizza elemento". Ti si aprono due finestre, a sinistra c'è l'html esploso con evidenziato l'oggetto da te cliccato e a dx ti dice tutti gli stili che ha quell'oggetto. Vedi che sulla sinistra puoi cliccare su qualsiasi tag e a dx ti viene fuori tutto quello che influenza quel tag.
Dovresti riuscire a vedere quanto sono larghi i tuoi contenitori.

Sulla destra puoi anche modificare i valori e vedere subito il risultato del cambiamento, naturalmente è solo un preview, le modifiche non avvengono per davvero.