List, verschil in FF2 en FF3 - Softwareontwikkeling

dinsdag 8 juli 2008 01:09

Acties:

Topicstarter

Al de hele avond zit ik met een probleem te stoeien met een list. Ik krijg het niet voor elkaar om het in elk browser gelijk te krijgen. Hopelijk weet iemand hier waar en waarom het mis gaat.

Het gewenste resultaat krijg ik wel in Firefox 2, Internet Explorer 6 en Opera.
Afbeeldingslocatie: http://dump.johnvh.nl/listprob_ff2.png

Afbeeldingslocatie: http://dump.johnvh.nl/listprob_ff2.png

_{Firefox 2}

Afbeeldingslocatie: http://dump.johnvh.nl/listprob_ie6.png

_{Internet Explorer 6}

In Firefox 3 en Safari gaat het mis, hier ziet het er alsvolgt uit;
Afbeeldingslocatie: http://dump.johnvh.nl/listprob_ff3.png

_{Firefox 3}

Hier krijg ik dus een ruimte aan de rechterkant die ik niet kan verklaren of weg krijg.

De HTML:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testerdetest</title>
<style type="text/css">
<!--
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
}

ul li ul {
    display: block;
    float: left;
}

ul li ul li {
    float: left;
}
-->
</style>
</head>

<body>
<ul>
    <li>Menu
    <ul>
        <li><a href="#">Head 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
        </li>
    </ul>
    <ul>
        <li><a href="#">Head 2</a>
        <ul>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</body>
</html>

klik voor deze pagina

Ik heb ontelbare dingen geprobeerd, maar ik krijg het niet voor elkaar.
Iemand die de oplossing weet?

dinsdag 8 juli 2008 11:08

Acties:

Zoefff

❤ 

Hoeveel niveaus wil je maken in dit menu? Blijft het hier bij, of komen er theoretisch nog meer bij?

Als het hier bij blijft zou ik namelijk wat stricter zijn met het uitdelen van floats. Nu krijgt de ul op het derde niveau namelijk ook een float:left; mee (regel 17) terwijl die helemaal niet nodig is. Als je "ul li ul" op regel 15 veranderd in "ul > li > ul" werk je wat stricter en deel je geen floats uit op plekken waar dat niet nodig is. Child selectors werken overigens niet in IE6, houd daar dus rekening mee.

Je kan het ook oplossen door van de anchors blokelementen te maken (ul li a { display: block; } ). Op de 1 of andere manier gaat FF3 wat "dingen" doen als er inline en blokelementen naast elkaar staan waarvan de 1 wel float en de ander niet, maar in hoeverre dat gedefinieerd (en correct) gedrag is kan ik niet echt achterhalen

De display:block op regel 16 is overigens overbodig, een ul is al een blokelement

[ Voor 5% gewijzigd door Zoefff op 08-07-2008 11:09 ]

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 8 juli 2008 14:07

Acties:

Johnvh

Topicstarter

Zoefff schreef op dinsdag 08 juli 2008 @ 11:08:
Je kan het ook oplossen door van de anchors blokelementen te maken (ul li a { display: block; } ). Op de 1 of andere manier gaat FF3 wat "dingen" doen als er inline en blokelementen naast elkaar staan waarvan de 1 wel float en de ander niet, maar in hoeverre dat gedefinieerd (en correct) gedrag is kan ik niet echt achterhalen

Een display: block; op de anchor is inderdaad de oplossing. Super bedankt!