Layers che si accavallano

dariomarco

Layers che si accavallano

Salve a tutti,
ho due layers, ma con firefox si vedono malissimo!
l'uno si accavalla con l'altro, poi la parte centrale, dove ci sono le voci-menu, si stacca dalla parte superiore, nn so come fare, le ho provate tutte:

questa è la corretta visualizzazione con ie
w w w . calabriainvacanza.it/ie.png

Mentre così lo vedo in firefox:
w w w . calabriainvacanza.it/ff.png

questo il codice:


div#tab-Extra-Container {
    border: none;
    height: 100%;
    position: relative;
    text-align: left;
    width: 169px;
}

div#tab-Extra-top {
    background-image: url('../Immaggini/sfondi/sfondomenuTop.gif');
    text-indent:30px;
    border: none;
    height: 46px;/**/
    left: 0px;
    padding: 0px;
    width: 169px;
}

div#tab-Extra-centro {
    background-image: url('../Immaggini/sfondi/sfondomenuCentro.gif');
    border: none;
    height: 76px;
    left: 0px;
    padding: 0px;
    width: 169px;
}

div#tab-Extra-basso {
    background-image: url('../Immaggini/sfondi/sfondoMenuDown.gif');
    border: none;
    height: 25px;
    left: 0px;
    overflow: hidden;
    padding: 0px;
    width: 169px;
}

Questo è il codice nella pagina


<div id="tab-Extra-Container" style="overflow:inherit">
       <div id="tab-Extra-top"><div class="Stile11" style="margin-top:22px; text-align:inherit">Menu:</div>
       </div>
            <div align="left" id="tab-Extra-centro" style="text-align:left;">
              <ul style="text-indent:-20px">
                <strong>Calabria</strong>
                <li>Catanzaro</li>
                <li><a href="#" onClick="nascondi()">Cosenza</a></li>
                <ul style="text-indent:-40px;" id="cosenza">
                    <li>Catena Costiera
                    <li>Pollino                    
                    <li>Serre                    
                    <li>Sila
                                    </ul>
                <li>Crotone</li>
                <ul style="text-indent:-40px">
                  <li>Alto Marchesato</li>
                </ul>
                <li>Reggio Calabria </li>
                <li>Vibo Valentia</li>
              </ul> 
            </div>
            <div height:25px" id="tab-Extra-basso"></div>
     </div>
      <div>
<iframe src="../infoterritoriali/controlliExtra.asp"  scrolling="no" frameborder="0" allowtransparency="yes" width="100%" height="246px" marginwidth="0"><br>
     </iframe>
     </div>

Sono sicuro che sbaglio nei css, perchè non sono un'esperto, mi dite voi cosa devo correggere pls???
grazie, ciao.

lumpi

<ul style="text-indent:-40px">Devi usare la proprietà padding per ff e un commento condizionale con la proprietà margin per ie.
Fammi sapere se hai altri problemi.
Ciao

dariomarco

Ok, thanks, per il text-indent, lo avevo capito che avevo fatto sicuramente una baggianata!
Ma vorrei chiederti la cortesia se potresti riguardarmi meglio il mio css, ho chiesto in giro per il commento, ed ho capito che bisogna mettere qualcosa del tipo !important, ma non sono sicuro di nulla, e soprattutto di quello che sto facendo, per questo, ti chiedo di metterci mano così, posso capire meglio.

Grazie, ciao.

lumpi

Ciao,
andiamo un passo alla volta:

Togli i text-indent che hai messo in ul
Inserisci le seguenti righe nel tuo css

ul{margin: 0 0 0 -10px;}

ul ul{margin-left: -20px;}
```(ovviamente puoi cambiare i valori)

Crea una altro file css tipo base_ie.css
Inserisci la seguente riga:

ul{padding-left: 40px;}

dariomarco

Si! mitico, funziona! thnx, da solo non ce l'avrei mai fatta.

per quanto riguarda lo sfondo staccato ecc... ho impostato tutti i margini e i padding a zero, dove non specificato, poi alla fine ho messo un br.

Poi, vorrei farti un'ultima domanda: ma se nel documento, ho un'altra lista, prende i valori del css che mi hai fatto impostare te???

Grazie, ciao.

lumpi

Ciao
si se hai altre liste probabilmente prenderanno le impostazioni, comunque puoi facilmente aggirare il problema assegnando dei nomi ai selettori.


ul{....

diventa

.pippo ul{
 
o 

.pippo ul ul

Ovviamente nel codice html devi inserire <ul class="pippo">

Facci sapere