[css] FF & Safari vs. Opera: margeprobleem

[Bananenplant]

Dag,

Ik ben vanaf 0 een wordpressthema voor m'n blog aan het maken en bezig met de mock-up daarvoor. De bedoeling is dat het goed werkt in Gecko/KHTML/Opera en bijna alles ziet er ook hetzelfde uit in die 3 engines, op één ding na.

Als je hier kijkt zie je in Gecko/KHTML netjes een gele balk met een paar links direct onder de bovenste 'banner' staan. Bij Opera is het ding een stuk naar links gesprongen.

Het stuk css hiervoor:

Cascading Stylesheet:

#navbar > ul {
    margin-left: -3em; /* de rakker */
    margin-top: auto;
    margin-bottom: 1em;
}

De elementen in de lijst worden naar links gefloat om ze naastelkaar te krijgen en hebben verder geen marge-stijling. #navbar zelf heeft:

Cascading Stylesheet:

#navbar{
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
        height: 1.2em;
    line-height: 1.2em;
        background-color: #ffffcc;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
    margin-top: 0;
}

Alle parent-elementen hebben marges op 0 gezet, dus je zou verwachten dat het uniform werkt in de drie engines. Als ik bij /* de rakker */ de marge op auto zet gaat het in Opera wel goed aan de linkerkant en is in de andere twee m'n eerste knop te breed. En als ik een negatieve marge aan de bovenkant gebruik om in Opera de balk tegen de banner boven aan te krijgen staan de knoppen over de banner in de andere twee. Ik heb al position: relative; left: 0; right: 0; geprobeerd en width: 100%; zodat #navbar niet breder zou moeten kunnen worden dan z'n beschikbare ruimte, maar dat maakt allemaal niks uit...

Iemand een idee hoe ik dit dusdanig fix dat het in alle drie de browsers goed werkt? Ik voel me een beetje een prutser nu .

Noot: er staan dubbele id's in de pagina, voor de rest is alles wel valid, ik had alleen vultekst nodig .

IE is geen prioriteit.

[Johnny]

Opera gebruikt voor sommige elementen padding waar andere browsers margin gebruiken, dus probeer die eerst eens op nul te zetten.

[Bananenplant]

Cascading Stylesheet:

#navbar > ul {
    margin-left: auto; /* de rakker nieuw */
    margin-top: auto;
    margin-bottom: 1em;
    display: inline; /* nieuw */
}

Dit regeltje deed het 'm, nu steekt-ie niet meer uit aan de kant .

(Ik schop 'm wel even omhoog als het thema op m'n blog klaar is, kun je het ook zien, maar ik heb liever niet dat het uitlekt als het niet nodig is )

[ Voor 37% gewijzigd door Bananenplant op 25-09-2005 18:03 ]