Menu's en IE gaan niet samen. Hulp gevraagd

**gast8208** · 23-03-2011, 23:08

Beste SD-ers,

Ik ben nou al een hele tijd bezig om een menu te maken met nog een sub menu daarin. En je raad het al, bij de meest gangbare browsers werkt hij perfectos! Alleen IE.. Het zwarte schaap van de familie ligt hartstikke dwars. Ik heb nou al zo lang zitten jojo-en dat ik nu jullie hulp inroep!

De html:

PHP Code:


            <!-- / menu \ -->

            <div id="menu">

            

                <ul>

                    <li class="hoofd"><a href="" title="" class="hoofd-link">Home</a></li>

                    <li class="hoofd"><a href="" title="" class="hoofd-link">twee</a>

                        <ul class="sub-1">

                            <li><a href="" title="" class="sub">1 sub</a></li>

                            <li class="actief"><a href="" title="" class="sub">1 sub actief</a>

                                <ul class="sub-2">

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                </ul>                

                            </li>

                            <li><a href="" title="" class="sub">1 sub</a></li>

                            <li class="actief"><a href="" title="" class="sub">1 sub actief</a>

                                <ul class="sub-2">

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                </ul>

                            </li>

                            <li class="actief"><a href="" title="" class="sub">1 sub actief</a>

                                <ul class="sub-2">

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                    <li><a href="" title="" class="sub">2 sub</a></li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                    <li class="hoofd"><a href="" title="" class="hoofd-link">drie</a></li>

                    <li class="hoofd"><a href="" title="" class="hoofd-link">vier</a></li>

                </ul>            

            </div>

            <!-- \ menu / -->

De normale css:

PHP Code:


#menu {width: 960px; height: 45px; margin: 13px 0 0 18px;}

#menu ul {list-style: none; padding: 0px; margin: 0 0 0 10px; position: absolute; z-index: 1;}

#menu a {text-decoration: none; z-index: 1;}

#menu ul li.hoofd {float: left; height: 40px; background: url(../images/menu-scheiding.png) center right no-repeat; margin-left: -2px; position: relative;}

#menu ul li.hoofd a.hoofd-link {display: block; padding: 0px 15px 0px 15px; height: 40px; color: #000; font-size: 14px; line-height: 40px; color: #fff;}

#menu ul li.hoofd a.hoofd-link:hover, #menu ul li.hoofd:hover a.hoofd-link {background: #ff994e url(../images/menu-hover.png) center top repeat-x;}

#menu ul.sub-1, #menu ul.sub-2 {display: none;}

#menu ul li.hoofd:hover .sub-1 {display: block;}

#menu ul.sub-1 li:hover ul.sub-2 {display: block;}

#menu ul.sub-1, #menu ul.sub-2 {background: #474749; margin: 0px; padding: 5px; filter:alpha(opacity=95); opacity:0.95;}

#menu ul.sub-2 {margin: -33px 0 0 200px; padding-left: 10px;}

#menu ul.sub-1 li, #menu ul.sub-2 li {display: block; width: 200px; height: 30px;}

#menu ul.sub-1 a.sub, #menu ul.sub-2 a.sub {display: block; width: 200px; height: 20px; border-bottom: 1px solid #5d5d5f; padding: 4px 0 4px 0; color: #fff; background: url(../images/sub-menu.gif) center left no-repeat; filter:alpha(opacity=95); opacity:0.95; text-indent: 15px; font-size: 12px;}

#menu ul.sub-1 a.sub:hover, #menu ul.sub-2 a.sub:hover {background: #fff url(../images/bg-hover.png) center left no-repeat; filter:alpha(opacity=95); opacity:0.95; color: #474749;}

De IE bug fix css:

PHP Code:


#menu ul.sub-1 li a.sub:hover .sub-2 {display: block; width: 200px;}

In de screenshots zien jullie het probleem. Kunnen jullie mij aub helpen?

Stefan

**Dries Lamberechts** · 15-04-2011, 00:31

Vanonder bij IE kan je zien dat het "de pagina is geladen maar met fouten" icoontje is verschenen.
ALs ik iets aan het maken ben gebruik ik dit soms om nog een foutje op te lossen.
Klik er eens op en dan op details klikken. Misschien zit daar de oplossing voor jouw probleem.

**Guido Veenstra** · 11-05-2011, 22:14

Verkeerde doctype kan ook vervormingen geven in IE. Kijk hier eens: http://www.w3schools.com/tags/tag_doctype.asp

Menu's en IE gaan niet samen. Hulp gevraagd