Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Problemi di allineamento di ul dentro ul solo con ie6

    Salve a tutti,
    ho un problema con delle liste annidate che vengono correttamente mostrate in firefox e opera, ma appaiono spostate sulla destra con ie6 (sembra che non riconosca il corretto margine sinistro assoluto)
    La lista incriminata è sulla seconda riga.
    Allego l'immagine di ie6 (spostata sulla destra, mentre con gli altri browser viene mostrata correttamente sotto la prima lista) ed il codice:
    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Documento senza titolo</title>
    <
    style>
    *{
        
    margin:0;
        
    padding:0;
    }
    html,body{
        
    background-color:white;
        
    height:100%;
    }

    body{
        
    font-family:VerdanaArialHelveticasans-serif;
        
    font-size:13px;
        
    font-style:normal;
        
    font-weight:normal;
    }
    div#documento{

        
    position:relative;
        
    width760px;
        
    height100%;
        
    margin:0 auto 0 auto;
        
    /*MARGIN: SUP-DX-INF-SX*/
        
    background-color:gray;
    }

    body>div#documento{

        
    height:auto;
        
    min-height:100%;
    }


    div#testata{

        
    background-color:red;
        
    height:100px;
    }
    div#menu{

        
    background-color:yellow;
        
    height:100px;
        
    text-align:center;
    }
    div#corpo{

        
    padding:10px 10px 50px 10px;
        
    background-color:green;
        
    }
    div#piede{
        
    positionabsolute;
        
    bottom:0
        
    width100%;
        
    background-color:blue;
        
    height:30px;
    }

    div#menu ul{


        
    border-bottom:2px solid #ccc;
        
    height:23px;
        
    width:100%;
        
    padding-top:10px;
    }

    div#menu ul ul{

        
    display:inline;
        
    position:absolute;
        
    margin-top:35px;

        
    border-bottom:2px solid #ccc;
        
    left:0;
    }

    div#menu li{

        
    position:relative;
        
    color:red;
        
    display:inline;
        
    margin-right:-2px;
    }


    </
    style>
    </
    head>
    <
    body>

        <
    div id="documento">
            <
    div id="testata">
                
    testata
            
    </div>    
            <
    div id="menu">
              <
    ul>
                [*][
    url="#"]Link 1[/url]
                [*][
    url="#"]Link 2[/url]
                [*]<
    span>Link 3</span>
                    <
    ul>
                        [*][
    url="#"]SubLink 1[/url]
                        [*][
    url="#"]SubLink 2[/url]
                        [*]<
    span>SubLink 3</span>
                        [*][
    url="#"]SubLink 4[/url]
                    [/list]
                [*][
    url="#"]Link 4[/url]
            [/list]
            </
    div>
            <
    div id="corpo">
              
    corpo
            
    </div>
            <
    div id="piede">
              
    footer
            
    </div>
        </
    div>
    </
    body>
    </
    html
    Vi ringrazio tutti in anticipo!
    Immagini allegate Immagini allegate
    What is the |\/|atrix?

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    E` un problema noto: le liste vengono realizzate con metodi diversi dai diversi browser.
    Di solito basta definire esplicitamente i margini e i padding sinistri sia degli <ul> che dei[*], ponendone a zero almeno uno.

    Comunque se ne e` parlato in altre occasioni: ti consiglio una ricerca nel forum (bottone in alto).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Li ho già fatti questi test ma niente da fare...
    Qualche altra idea?
    What is the |\/|atrix?

  4. #4
    up
    What is the |\/|atrix?

  5. #5
    Non so se è corretto o no scrivere

    div#menu ul ul

    non dovrebbe essere

    div#menu ul li ul

    ?


    Comunque se togli il display:inline; cambia il comportamento?

    Io sto avendo un problema simile ed è colpa di quello.... solo che non so ancora come risolvere

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    non dovrebbe essere div#menu ul li ul
    Nei selettori dei CSS, lo spazio indica discendente, mentre il carattere > (maggiore) indica diretta discendenza (non supportato da IE6).

    Quindi in una situazione in cui e` vero:
    div#menu>ul>li>ul
    il selettore
    div#menu ul ul
    indica gli stessi elementi: infatti l'ul interno e` comunque discendente dell'ul esterno, anche se non diretto discendente. quest'ultima notazione potrebbe (in teoria) includere anche qualcosa in piu`, ad esempio
    div#menu>div>ul>li>ul
    div#menu>ul>li>ul>li>ul
    Ma mi pare poco probabile nel contesto (ma possibile in un menu a piu` livelli).

    ---
    Il display:inline va usato quando si sa cosa vuol dire.
    In linea di massima un <ul> non e` un elemento inline, ma un blocco.
    Volendo un menu orizzontale, conviene usare il float:left; per affiancare i blocchi, non il display:inline.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Ottima precisazione.

    Un pò di chiarezza fa sempre bene

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.