[css] margin-top probleem opera bij clear: left na float.

[cyberstalker]

Om onduidelijke redenen valt een margin-top bij Opera groter uit dan bij andere browsers. Ik heb zelf het vermoeden dat het komt doordat de meeste browsers niet vanaf het vorige element tellen wanneer deze gefloat is.

HTML:

<ul id="navigation">
    <li><a href="index.php">Hoofdmenu</a></li>
    <li>Kleurenkiezer</li>
</ul>
<ul id="menu">
    <li><a href="" id="mnu_hoofdmenu">Hoofdmenu</a></li>
    <li>
        <a href="" id="mnu_modules">Modules</a>
        <ul>
            <li><a href="" id="mnu_nieuws">Nieuws</a></li>
            <li><a href="" id="mnu_fotoboek">Fotoboek</a></li>
            <li><a href="" id="mnu_nieuwsbrief">Nieuwsbrief</a></li>
            <li><a href="" id="mnu_zoekfunctie">Zoekfunctie</a></li>
            <li><a href="" id="mnu_vraagantwoord">Vraag &amp; Antwoord</a></li>
            <li><a href="" id="mnu_maillijst">Maillijst</a></li>
            <li><a href="" id="mnu_kalender">Kalender</a></li>
        </ul>
    </li>
    <li><a href="" id="mnu_layout">Layout</a></li>
    <li><a href="" id="mnu_tekstpaginas">Tekstpagina's</a></li>
    <li><a href="" id="mnu_gebruikers">Gebruikers</a></li>
    <li><a href="" id="mnu_instellingen">Instellingen</a></li>
    <li><a href="" id="mnu_beveiliging">Beveiliging</a></li>
    <li><a href="" id="mnu_help">Help</a></li>
</ul>

Ik heb sowieso alle margins en paddings voor <ul> en <li> weggehaald, vanwege de grote verschillen per browser:

Cascading Stylesheet:

ul, li
{
    margin: 0px;
    padding: 0px;
}

ul
{
    list-style-type: none;
    clear: left;
}

ul#navigation
{
    margin-top: 25px;
    display: block;
}

ul#navigation li
{
    float: left;
}

ul#menu
{
    margin-top: 45px;
}

Het menu (<ul id="menu">) komt in Opera dus lager uit dan in andere browsers. Ik denk dus dat de meeste browsers de margin vanaf boven berekenen omdat het element ervoor gefloat is, terwijl Opera wel netjes vanaf het vorige element rekent.

Voor een 'werkend' voorbeeld van het probleem kun je terecht op http://www.xs4all.nl/~zeep10/test/index.xhtml

Heeft iemand enig idee wat hier aan te doen is, behalve dan het menu absoluut positioneren (iets wat ik liever niet doe).

[crisp]

Je ul#navigation heeft logischerwijs geen hoogte omdat alle li's daarbinnen uit de flow zijn gehaald; ik denk dat je daar nog iets met clearing moet doen (zet bv een overflow:hidden op je ul#navigation) - je hoeft dan ws geen margin-top meer op te geven voor je ul#menu.

Welke versie Opera test je overigens in? In de versie 9 preview zijn wel een aantal bugs mbt margins en collapsing gefixed (niet alle though - workaround is dan vaak toch padding gebruiken ipv margins, eventueel met een extra wrapping element).

[ Voor 11% gewijzigd door crisp op 21-05-2006 21:28 ]

[cyberstalker]

Zoals gewoonlijk heb je weer helemaal gelijk crisp. Zodra ik die overflow: hidden er inzette, zag het er in Fx precies hetzelfde uit als in Opera.

Ik test overigens in Opera 8.52, maar het is dus blijkbaar geen Opera bug, maar gewoon het verschil dat Opera waarschijnlijk standaard al overflow: hidden instelt.

[crisp]

Het zou kunnen zijn dat Opera 8.52 op dat punt IE's behavior immiteerd. In de versie 9 preview zag ik dat echter niet.