[css] IE 9 zorgt voor slecht werkend dropdown menu

[Joopieboy]

Al enige tijd (1,5 jaar) gebruik ik een eigen thema voor mijn website, geen enkel probleem, tot de komst van IE 9. Toen viel het mij op dat het menu wat uitvouwt, wat normaal gesproken als 1 regel getoond moet worden (zoals in FF en Google Chrome goed gaat), nu onder elkaar word getoond.

Zo moet het dus, zoals in FF:

En dit maakt IE 9 ervan:

Het menu los geeft wel het werkende resultaat: testcase

Wat het probleem is, is dat IE het uitklap menu niet breder wilt maken als de tekst waaruit het menu komt.
Als ik de tekst breder maak, valt het uitklap menu ook breder uit. De tekst heeft geen vaste breedte namelijk. Maar IE reageert wel alsof het zo is.

Dus daar ergens in zit het probleem, al enige tijd ben ik bezig geweest met display:block; en display:inline;, position tags, etc. En of ik doe iets verkeerds (waarschijnlijk), of ik heb toch ergens een fout gemaakt met de code die ik er niet uitkrijg, en die bij vorige IE versies niet naar voren is gekomen. Ik kon ook geen code vinden die dit oplost...

De code van het menu in mijn html pagina:

HTML:

<div id="menu">
        <ul id="nav">
            <li><a href="?page_id=175" class="nav">Index</a></li>
            <li><a href="?page_id=411" class="nav">Nieuws</a></li>
            <li><a href="#" class="nav">Apparatuur</a>
                <ul>
                    <li><a href="?page_id=24" class="navb">Mijn Home Theater</a></li>
                    <li><a href="?page_id=45" class="navc">Quad Core PC</a></li>
                    <li><a href="?page_id=50" class="navc">HP M8060</a></li>
                    <li><a href="?page_id=51" class="navc">Pentium 4 PC</a></li>
                    <li><a href="?page_id=53" class="navc">Nokia 6700 Firmware</a></li>
                </ul>
            </li>
            <li><a href="#" class="nav">Auto's</a>
                <ul>
                    <li><a href="?page_id=55" class="navb">Suzuki Swift</a></li>
                    <li><a href="?page_id=64" class="navc">(ex)Renault 19</a></li>
                </ul>
            </li>
            <li><a href="?page_id=72" class="nav">Portfolio</a></li>
            <li><a href="?page_id=275" class="nav">Over mij</a></li>
            <li><a href="?page_id=78" class="nav">Contact</a></li>
        </ul>
        <p class="copyright" align="right">&copy 2008-2010 Johan Hogervorst</p>
    </div>

De code van het stuk dropdown menu in mijn stylesheet:

Cascading Stylesheet:

#nav , #nav ul {padding:0;
    margin:0;
    list-style:none;
    cursor:pointer;}
#nav li {float:left;
    margin-left:39px;}
#nav li ul {position:absolute;
    left:-999em;}
#nav li ul li {margin:0px;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#nav a {display:block;}

Zie: style.css

Iig zie ik niet in waar dit probleem nu echt mee te maken heeft. Misschien is het gewoon een heel stom en simpel iets, maar ik word er al goed lastig van. Begon ook al lastig te doen tegen een vriend van mij.
Dus als iemand het weet, of een idee heeft, heel erg bedankt.

[Voor 22% gewijzigd door Joopieboy op 04-06-2011 12:02]

[Anoniem: 313439]

je hebt in je css navb en navc geen formattering meegegeven?

[Joopieboy]

Nee dat klopt, daar heb ik geen rekening mee gehouden.
Dat stuk is nog redelijk 'ranzig', maar dat is vooral qua tekst en uitlijning. Dat verklaart nog niet waarom het uitklap menu onder de menu kop blijft, en ook niet breder is in IE.

[Voor 55% gewijzigd door Joopieboy op 04-06-2011 00:14]

[Yanik]

Misschien komt het omdat je pagina in Quirks Mode gerenderd wordt. In Standards Mode werkt het ok.

Check of je site goed wordt gevalideert(doctype enzo), want ik heb het idee dat er enkele fouten zitten waardoor IE terugvalt in Quirks Mode.

[Joopieboy]

Daar kun je wel eens gelijk in hebben. Ik heb met behulp van de W3C Validator een aantal fouten uit de broncode gehaald. Sowieso klopte de doctype xhtml niet, de encoding was ook de foute, ik miste een hoop alt tags, etc. Deze zijn er nu uitgehaald, en W3C heeft de code goedgekeurd nu. Enige is dat nu nog dat Wordpress die erachter zit, fouten maakt met de br tag (<br />).

Zie: W3C

Wat Dutch T-bone gisterenavond nog zei over de formatting, ik mis het punt geloof ik een beetje daarin. Ik zal daar ook eens naar kijken.


Edit: als ik een losse testcase aanmaak, dan blijft de pagina in normale modus:
testcase

Op mijn website gebeurt dit dus niet, ik heb dit geprobeerd geforceerd te laten werken in normale modus door:

HTML:

<meta http-equiv="X-UA-Compatible" content="IE=8" >

En:

HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

Beiden hadden geen succes, dit was ook puur om te proberen. Via de F12 functie in IE9 zie ik wel dat de standaard instelling voor IE9 de standaardinstelling voor deze pagina is. Als ik deze handmatig selecteer werkt het menu wel gewoon.
Maar toch gaat hij naar Quirks Mode, ondanks dat ik iframes gebruik oid, dus ik snap niet waarom.


Edit 2: dit was echt een dikke faal van mij. Ik had de doctype niet als 1e regel gezet op mijn pagina, vanwege wordpress. Ik had eerst de code van de pagina thema:

HTML:

<?php
/*
Template Name: Index
*/
?>

Dan wat commentaar, en dan pas de doctype. De basisregel overtreden.

Problem solved!

[Voor 64% gewijzigd door Joopieboy op 04-06-2011 12:31]