Div che sborda con Opera, FF e NN

[Eugene]

Buongiorno.

Il problema è il seguente: tramite js gestisco la visibilità di un div contenente un elenco.
Ovviamente, quando l'elenco è visibile aumenta l'altezza del div.
Con IE non ho problemi, mentre con gli altri browser il div contenente l'elenco si sovrappone o provoca lo spostamento di quelli sottostanti.

Per farvi un'idea potete vedere il lavoro in corso alla pagina http://www.yodastudio.com/prove/tvs/template_nav.htm.

Se provate a cliccare sulle parole "Camcorder" e "Videoregistratori" noterete quanto sopra indicato.

Il codice css degli elementi in questione è il seguente:

.rigaMenuProd {
margin: 20px 0px;
width: 562px;
display: compact;
}

.boxMenuHide1 {
margin: 0 0 0 1px;
padding: 0 5px;
width: 170px;
text-align: left;
display: block;
float: left;
position: relative;
}

.boxMenuHide2 {
margin: 0;
padding: 0 5px 0 0;
width: 175px;
position: relative;
text-align: left;
display: block;
}

.boxMenuHide3 {
margin: 0 2px 0 0;
padding: 0 5px;
width: 170px;
position: relative;
text-align: left;
display: block;
float: right;
}

.elencoHide {
background-color: #F7F8FB;
margin: 5px;
padding: 5px;
}

Faccio presente che con i css non sono un esperto, quindi non è escluso che la soluzione sia più semplice di quanto io non pensi.

Grazie

PS. nella pagina dalla quale ho preso lo script vegono usate le tabelle e questo problema non si presenta, ma sto cercando di fare il possibile per non utilizzare più questo elemento.

[floyd46]

ecco quello che appare:
Il sito e' in fase di aggiornamento.
Floyd

[Eugene]

Piccola svista, chiedo scusa.
Già sistemato.

[Eugene]

Eccomi nuovamente.

Ho avuto modo di fare alcune prove, ed i risultati ottenuti fanno sì che adesso, quando apro gli elenchi, gli oggetti sottostanti non variano di posizione.
L'inconveniente è che il contenuto degli elenchi laterali viene del tutto "ignorato" dal resto della pagina, cosa che invece non accade con gli elenchi posti al centro, che fanno adattare l'altezza del div contenitore in base alla loro, di altezza.
Inoltre, adesso il problema non è più circoscritto ai browser non IE ma esteso a tutti.

Ritengo che il problema sia dovuto al modo di gestire la posizione dei due elenchi laterali; sia con il float che con il posizionamento assoluto si ottiene sempre l'effetto "sovrapposizione" che è verificabile nella pagina pubblicata (vedere primo post) ma d'altro canto, per ottenere questa disposizione orizzontale, non conosco altri sistemi.

Di seguito riporto i nuovi css e non fate caso ai colori o ai bordi che saranno da eliminare/modificare:

.rigaMenuProd {
margin: 20px 0px;
width: 562px;
display: block;
top: 0;
position: relative;
}

.boxMenuHide1 {
margin: 0 0 0 1px;
padding: 0 5px;
width: 170px;
text-align: left;
position: absolute;
left: 0;
}

.boxMenuHide2 {
margin: 0;
padding: 0 5px 0 0;
width: 175px;
position: relative;
text-align: left;
display: block;
border: 1px solid #993300;
}

.boxMenuHide3 {
margin: 0 2px 0 0;
padding: 0 5px;
width: 170px;
position: absolute;
text-align: left;
right: 0;
}

.elencoHide {
background-color: #F7F8FB;
margin: 5px;
padding: 5px;
border: 1px solid #993300;
display: compact;
}

.testorosso {
COLOR: #935CA9;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}

.testorosso:hover {
COLOR: #935CA9;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}

.testoblu {
color: #336699;
text-align: left;
text-decoration: none;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

.testoblu:hover {
text-decoration: underline;
}

Grazie