[html & CSS] random whitespaces tussen li's

[Verwijderd]

Dag allemaal,

Ik wil een menu plaatsen dmv linkimages in een unordered list en bij voorkeur zonder float (dan explodeert alles in Opera voor Mac). Gaat allemaal goed door het meegeven van een bottom margin van -4px aan de pics in kwestie. FF plaatst opeens een extra pixel whitespace om de twee buttons?!
Nog nooit meegemaakt dit, dus ik ben even in verwarring, als het nou na elke li was maar om de twee...


In IE, opera geen probleem. NS & FF vertonen het willekeurige pixelgedrag..

Iemand enig idee, alvast hartelijk dank!

[ Voor 11% gewijzigd door Verwijderd op 16-08-2005 15:14 ]

[Cubix]

Eerst ff dit:
Zoals die plaatjes nu zijn (egaal, met zwart randje) is het veel beter om die buttons gewoon met css te maken, ipv een plaatje. Als je later echt grafische plaatjes gaat maken zou ik ze niet als img in je html zetten, maar als background-image in je css.
Verder staan er gigantisch veel overbodige zaken in je css, en heb jij je html geen doctype gegeven.

Is dit allemaal bewust?

[MBV]

niet zeuren,je krijgt nu een gratiz 3d-effect

al gekeken op het internet naar firefox-bugs? zoals http://www.positioniseverything.net/gecko.html?

als het elke 2e div gebeurt, zou het aan een afrondingsfout kunnen liggen: 0,5px*1=0px, 0,5px*2 = 1px.

[Verwijderd]

doe eens display: block; op je plaatjes (en de margin weg)

[Verwijderd]

Cubix schreef op maandag 08 augustus 2005 @ 12:20:
Eerst ff dit:
Zoals die plaatjes nu zijn (egaal, met zwart randje) is het veel beter om die buttons gewoon met css te maken, ipv een plaatje. Als je later echt grafische plaatjes gaat maken zou ik ze niet als img in je html zetten, maar als background-image in je css.
Verder staan er gigantisch veel overbodige zaken in je css, en heb jij je html geen doctype gegeven.

Is dit allemaal bewust?

Het zijn idd dummyplaatjes, de definitieve zullen wel grafisch moeten, ik gebruik geen div bg's omdat ze uiteindelijk in mijn favoriete mouse-over script komen dat img's vereist.. En wat de rest betreft is het idd bewust als testje neergezet, geen doctype e.d.

Als ik display:block; ipv de margetruc gebruik gooit IE whitespaces ertussen, FF & Opera tonene hem dan al correct.

Wat betreft de Gecko bug, ik ga er meteen naar kijken.

Allemaal alvast bedankt!

[Verwijderd]

Als ik display:block; gebruik en de hack voor IE met _margin krijg ik ze wel tegen elkaar in alle browsers.

Dan moet ik echter:
- alle li's afsluiten en de volgende li zonder spatie of return er tegenaan trekken
- voor IE de plaatjes een _margin (lower) meegeven van -19px (!)
- Dan houdt IE nog steeds een marge boven de bovenste button van 19px

Ik vind dit alles behalve een elegante oplossing.
Bovendien weet ik niet zeker of alle Mac en linux browsers 'm wel pakken. Maar ja, ga ik straks checken.

Iig kijk ik verder naar een oplossing

[MBV]

soms reageren browsers anders zodra je een doctype erin gooit. Helpt een strict doctype voor jouw probleem?

[Verwijderd]

Helaas niet, de oorspronkelijke opzet stond al in een strict doc, daar functioneerde het niet en dus heb ik een apart testje gemaakt, zonder al die andere clutter op de pagina zeg maar.

Ik ga weer verder proberen, heeft iemand overigens ervaringen met ul menu's als cross browser oplossing? Is dat een aanpak met potentie of meer een dood spoor?

[mullah]

Je hebt de li en de a niet in je css gedefinieerd.. dus krijg je daar de default eigenschappen, die je layout kunnen verkloten.
Het ziet er verder uit als rounding errors. probeer ook eens een fontsize, lineheight, marges en padding te gebruiken, als het goed is zie je dan op zijn minst verschil

Het is trouwens een goed plan om je li elementen ook af te sluiten, zeker als je in een strict doctype wilt gaan werken (alhoewel dit geen effect op je layout zou moeten hebben weet je maar nooit, en het is wel leesbaarder als je meer inhoud er in hebt staan)

[crisp]

zoiets is ook misschien nog een mogelijkheid:

Cascading Stylesheet:

li a {
    float: left;
}
li>a {
    float: none;
    display: block;
}

[Verwijderd]

Ik heb 'm nu zoals het menu er uit zou moeten komen te zien.
De uitvoering is echter nog steeds verre van elegant. Alle opties hierboven ook geprobeerd maar geen succes.

Uiteindelijk dmv display block en een aantal _margins zo gekregen.

Voor de geïnteresseerden en critici


Zou iemand even kunnen kijken hoe het er uit ziet in IE/Opera voor Mac en/of Konqueror?

Alvast heel erg bedankt!

[ Voor 12% gewijzigd door Verwijderd op 16-08-2005 15:15 ]

[Sappie]

zoiets misschien nog een alternatief:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        #cmenu {
            list-style: none;
            margin: 0 auto;
            padding: 0;
            width: 200px;
        }
        
        #cmenu li a {
            display: block;
            width: 200px;
            height: 20px;
            _margin-bottom: -4px; /* voor IE dus */
        }
        
        #cmenu li a img { border: none; }       
    </style>
</head>
<body>
    <ul id="cmenu">
        <li><a href="#">[img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
        <li><a[/img][img]"images/testbutton.gif"></a></li>
    </ul>
</body>
</html[/img]

[Verwijderd]

In één woord: groots!

Je oplossing werkt perfect, Sappie. Ik heb 'm stiekem even door browsercam gehaald en alleen bij NS en IE 4.x explodeert de boel enigszins (maar ja, als we daar rekening mee gaan houden dienen we ook stoommachine compatible te gaan coderen, toch)

De sleutel was dus de formatting op de list te concentreren ipv de img's. Eigenlijk logisch.

Allen weer veel dank!

[Verwijderd]

Weet iemand overigens een manier om de _margin IE hack als correcte CSS te valideren?

Alvast bedankt!

[Verwijderd]

een aparte IE only stylesheet opnemen mbv conditional comments
http://www.quirksmode.org/css/condcom.html

[crisp]

of zoals ik al eerder demonstreerde gebruik maken van selectors die IE (nog) niet ondersteund:

Cascading Stylesheet:

element {
    margin-bottom: -4px; /* voor IE */
}
parent>element {
    margin-bottom: 0; /* voor echte browsers */
}

overigens betreft het hier de line-height bug

[Verwijderd]

Thanks! Hier zocht ik ook net naar. Rare bug van IE trouwens. Verdubbelt gewoon de hele waarde

[ Voor 21% gewijzigd door Verwijderd op 11-08-2005 04:43 ]