HTML / CSS - problema con menu a comparsa laterale

11/09/11 9:30

salve ragazzi, da un pò di tempo Internet Explorer mi sta facendo impazzire..
ho creato un menu a comparsa lateralemolto semplice..
ecco il codice:

<html>
    <head>
        <title>index</title>
        <style type="text/css">

            #MENU_CONTAINER{
                width: 190px;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                border-top: 1px solid gray;
            }
            a.MENU{
                display: Block;
                position: Relative;
                background-color:  #FFFFFF;
                color: black;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
                border-bottom: 1px solid gray;
            }
            a.MENU:hover{
                display: Block;
                position: Relative;
                background-color:  #CCCCCC;
                color: blue;
                text-decoration: None;
            }

            a.SMENU{
                display: Block;
                position: Relative;
                color: #000000;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
                background-color: #ffffff;
                border-bottom: 1px solid gray;
            }
            a.SMENU:hover{
                display: Block;
                position: Relative;
                background-color:  #CCCCCC;
                color: blue;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
            }
            div.SMENU{
                visibility: Hidden;
                position: Absolute;
                margin: -42px 0px 0px 190px;
                width: 190px;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                border-top: 1px solid gray;
            }
        </style>
    </head>
    <body>

        <div id="MENU_CONTAINER">
            <div onmouseover="ApriMenu(1)" onmouseout="ChiudiMenu(1)">
                <a href="#" class="MENU">Link # 1</a>
                <div id="SM1" class="SMENU">
                    <a href="#" class="SMENU">Voce # 1</a>
                    <a href="#" class="SMENU">Voce # 2</a>
                    <a href="#" class="SMENU">Voce # 3</a>
                    <a href="#" class="SMENU">Voce # 4</a>
                    <a href="#" class="SMENU">Voce # 5</a>
                </div>
            </div>
            <div onmouseover="ApriMenu(2)" onmouseout="ChiudiMenu(2)">
                <a href="#" class="MENU">Link # 2</a>
                <div id="SM2" class="SMENU">
                    <a href="#" class="SMENU">Voce # 1</a>
                    <a href="#" class="SMENU">Voce # 2</a>
                    <a href="#" class="SMENU">Voce # 3</a>
                    <a href="#" class="SMENU">Voce # 4</a>
                    <a href="#" class="SMENU">Voce # 5</a>
                </div>
            </div>
            <div onmouseover="ApriMenu(3)" onmouseout="ChiudiMenu(3)">
                <a href="#" class="MENU">Link # 3</a>
                <div id="SM3" class="SMENU">
                    <a href="#" class="SMENU">Voce # 1</a>
                    <a href="#" class="SMENU">Voce # 2</a>
                    <a href="#" class="SMENU">Voce # 3</a>
                    <a href="#" class="SMENU">Voce # 4</a>
                    <a href="#" class="SMENU">Voce # 5</a>
                </div>
            </div>
        </div>

    </body>
    <script type="text/javascript">
        function ApriMenu(i)
        {
            document.getElementById("SM" + i).style.visibility = "Visible";
        }
        function ChiudiMenu(i)
        {
            document.getElementById("SM" + i).style.visibility = "Hidden";
        }
    </script>
</html>

fin qui tutto ok, questa pagina funziona perfettamente con firefox,IE e chrome.
Se prendo il menu e lo inserisco in una pagina con un layout tipo a tre colonne
eccovi il codice:

<html>
    <head>
        <title>index</title>
 <style type="text/css">
            div#testa{
                width: 100%;
            }
            div#corpo{
                width: 100%;
                height: auto;
            }
            div#footer{
                width: 100%;
                clear: both;
            }
            div#logo{
                width: 100%;
                height: 100%;

            }
            div#menu {
                width: 100%;
                height: 100%;
      
            }
                        #MENU_CONTAINER{
                width: 190px;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                border-top: 1px solid gray;
            }
            a.MENU{
                display: Block;
                position: Relative;
                background-color:  #FFFFFF;
                color: black;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
                border-bottom: 1px solid gray;
            }
            a.MENU:hover{
                display: Block;
                position: Relative;
                background-color:  #CCCCCC;
                color: blue;
                text-decoration: None;
            }

            a.SMENU{
                display: Block;
                position: Relative;
                color: #000000;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
                background-color: #ffffff;
                border-bottom: 1px solid gray;
            }
            a.SMENU:hover{
                display: Block;
                position: Relative;
                background-color:  #CCCCCC;
                color: blue;
                text-decoration: None;
                padding: 10px 3px 10px 30px;
            }
            div.SMENU{
                visibility: Hidden;
                position: Absolute;
                margin: -42px 0px 0px 190px;
                width: 190px;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                border-top: 1px solid gray;
            }
        </style>
    </head>
    <body>

        <div id="testa" align="center">
            <table border="1" width="90%">
                <tr style="height: 150px;">
                    <td>
                        <div id="logo"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="menu">
                                             
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div id="corpo" align="center">
            <table border="1" width="90%">
                <tr>
                    <td width="18%" valign="top">
                        <div id="MENU_CONTAINER">
                            <div onmouseover="ApriMenu(1)" onmouseout="ChiudiMenu(1)">
                                <a href="#" class="MENU">Link # 1</a>
                                <div id="SM1" class="SMENU">
                                    <a href="#" class="SMENU">Voce # 1</a>
                                    <a href="#" class="SMENU">Voce # 2</a>
                                    <a href="#" class="SMENU">Voce # 3</a>
                                    <a href="#" class="SMENU">Voce # 4</a>
                                    <a href="#" class="SMENU">Voce # 5</a>
                                </div>
                            </div>
                            <div onmouseover="ApriMenu(2)" onmouseout="ChiudiMenu(2)">
                                <a href="#" class="MENU">Link # 2</a>
                                <div id="SM2" class="SMENU">
                                    <a href="#" class="SMENU">Voce # 1</a>
                                    <a href="#" class="SMENU">Voce # 2</a>
                                    <a href="#" class="SMENU">Voce # 3</a>
                                    <a href="#" class="SMENU">Voce # 4</a>
                                    <a href="#" class="SMENU">Voce # 5</a>
                                </div>
                            </div>
                            <div onmouseover="ApriMenu(3)" onmouseout="ChiudiMenu(3)">
                                <a href="#" class="MENU">Link # 3</a>
                                <div id="SM3" class="SMENU">
                                    <a href="#" class="SMENU">Voce # 1</a>
                                    <a href="#" class="SMENU">Voce # 2</a>
                                    <a href="#" class="SMENU">Voce # 3</a>
                                    <a href="#" class="SMENU">Voce # 4</a>
                                    <a href="#" class="SMENU">Voce # 5</a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td width="64%">centro<br><br><br>centro<br><br><br>centro<br><br><br>centro<br><br><br><br><br><br>
                        <br><br><br><br><br><br>
                    <td width="18%">destra</td>
                </tr>
            </table>
        </div>

        <div id="footer" align="center">
            <table border="1" width="90%">
                <tr style="height: 100px;">
                    <td>footer</td>
                </tr>
            </table>
        </div>

    </body>
    <script type="text/javascript">
        function ApriMenu(i)
        {
            document.getElementById("SM" + i).style.visibility = "Visible";
        }
        function ChiudiMenu(i)
        {
            document.getElementById("SM" + i).style.visibility = "Hidden";
        }
    </script>
</html>

Non funziona bene con IE il menu a volte scompare..
non capisco quale sia il problema, forse è un problema di layout generale della pagina?
Perchè il menu da solo in una pagina funziona?
Potete aiutarmi per favore..

Ultima modifica effettuata da Bonny 12/09/11 9:23

aaa

11/09/11 15:57

netarrow

Non usare le tabelle per fare il layout del sito. E' sbagliato e ti crea problemi.
Usa i tag in maniera semantica; le tabelle indicano dati tabellari.
Il layout va fatto con div/css e basta.

In particolare il "layout a 3 colonne" è chiamato Holy Grail Layout, e trovi svariati esempi in rete: alistapart.com/articles/holygrail/

Inoltre non usare direttamente javascript.
Usa piuttosto qualche libreria come jQuery che internamente fa già lei dei controlli per utilizzare funzionalità supportate dal browser per raggiungere il risultato desiderato.

PS: I menu si fanno solitamente sotto forma di liste (ul - li) modificandone l'aspetto via CSS.

Ultima modifica effettuata da netarrow 11/09/11 15:59

aaa