[CSS]Suckerfish-menu gaat scheef in IE

[KappuhH]

Naar aanleiding van dit artikel heb ik een Suckerfish menu gemaakt. In Firefox werkt het (tot nog toe) goed, maar in IE klapt het menu niet goed uit. De voorkant van het uit te klappen menu begint halverwege het blokje ipv het aan de rechterkant.

Nu stond er in dat artikel ook een link naar een beter opgemaakt menu, namelijk deze. Die doet het in IE wel goed, als ik nu echter de letterlijke CSS code dat die pagina in mijn CSS code plak treedt hetzelfde probleem op.

De relevante CSS code:

code:

div#menu {
padding: 3px 0px 0px 0px;
background-color: #516392;
border-top: 1px solid #516392;
border-right: 1px solid #516392;
border-left: 1px solid #516392;
border-bottom: 1px solid #516392;
width: 750px;
height: 22px;
}

#nav, #nav ul { 
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 20px;  
}

#nav a {
    display: block;
    width: 10em;
}

#nav li { 
    float: left;
    display: inline;
    height: 22px;
    width: 10em; 
    }
    
#nav li a {
    text-decoration: none;
    height: 22px;
    color: #ffffff;
    background-color: #626262;
}

#nav li a:hover {
    background-color: #FFFFFF;
    color: #000000;
    }   

#nav li ul { 
    position: absolute;
    width: 10em;
    left: -999em; 
    z-index: 10;
}

#nav li:hover ul, #nav li.sfhover ul { 
    left: auto;
    color: #000000;
    border-bottom: 2px solid #123456;
}

De relevante HTML code:

code:

<div ID="menu">
<ul ID="nav">
    <li><a href="?p=1">Home</a>
        <ul>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
        </ul>
    </li>
    <li><a href="?p=2">Optie1</a>

        <ul>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
        </ul>
    </li>
    <li><a href="?p=4">Foto's</a>

        <ul>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
        </ul>
    </li>
    <li><a href="?p=5">Contact</a>
        <ul>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>
            <li><a href="#">Optie</a></li>          
        </ul>
    </li>
</ul>
</div>

En de pagina waar het om gaat: Klik

[XWB]

Woei, ik lijk wel een helpdesk vandaag

Maak van

HTML:

#nav li { 
    float: left;
    display: inline;
    height: 22px;
    width: 10em; 
    }

even:

HTML:

#nav li {
    list-style: none;
    float: left;
    position: relative;
    }

Voor IE:

HTML:

#nav li:hover ul, #nav li.over ul { 
    left: auto;
    color: #000000;
    border-bottom: 2px solid #123456;
}

En dan even dit JS'je:

JavaScript:

over = function() 
{
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) 
    {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}

if (window.attachEvent) window.attachEvent("onload", over);

[ Voor 12% gewijzigd door XWB op 29-03-2006 14:24 ]

[KappuhH]

Als ik die dingen toepas dan is mn hele design weg in Firefox en klapt het menu niet uit in IE. Waarom zou ik mn javascript moeten vervangen? Het enige wat ie doet is dat ie dan in het Nederlands is zegmaar. En waarom

HTML:

#nav li { 
    float: left;
    display: inline;
    height: 22px;
    width: 10em; 
    }

vervangen door

HTML:

#nav li {
    list-style: none;
    float: left;
    position: relative;
    }

Als ik alleen dat bovenste stukje CSS verander dan istie in Firefox wel goed, maar in IE klapt hij niet uit...

[XWB]

Als ik jouw code copy/paste, ziet het er in FF goed uit, maar in IE werkt het totaal niet.
Zie http://users.telenet.be/betapics/menu1.html

Voor IE voeg ik dan een stukje JS toe, want IE kent geen hover, dus zonder een JS trucje kan het nooit werken. Hiermee werkt het in FF en IE.
Zie http://users.telenet.be/betapics/menu2.html

Echter, in IE staan de uitgeklapte menu's niet goed. Daarom verander ik

HTML:

#nav li { 
    float: left;
    display: inline;
    height: 22px;
    width: 10em; 
    }

even naar

HTML:

#nav li {
    float: left;
    list-style: none;
    position: relative;
    }

Zie http://users.telenet.be/betapics/menu3.html

En dat werkt hier goed in FF1.5 en IE6.

[ Voor 5% gewijzigd door XWB op 29-03-2006 16:00 ]

[KappuhH]

Het werkt, ik moest nog even een z-index toevoegen omdattie anders niet over de onderstaande div heen klapte. Iig hartelijk bedankt, mag op slot...