[CSS] probleem met list onder IE

[P_de_B]

Ik ben wat aan het prutsen met een Wordpress blog http://pdeb.area61server.nl/index.php

Onder Firefox ziet het menu eruit zoals het moet maar onder IE zat er ruimte tussen elk menuitem.



Ik heb om dit op te lossen de tip gehad om de volgende CSS voor IE toe te voegen:

Cascading Stylesheet:

.nav ul {
  overflow: auto; /* auto-clearing */
}
.nav ul li {
  width: 156px;
  float: left;
  clear: both;
}

Dit geeft al eeen ander resultaat, maar nog steeds niet het gewenste. Er zit nu niet tussen alle menuitems ruimte. Deze wijzigingen geven weer een ander probleem in FF (scrollbar bij klikken op een menuitem) maar dat los ik wel op door een browserspeficieke css. Ik zou eerst graag weten hoe ik IE zo gek krijg het menu er net zo uit te laten zien als bij FF.

[Johnny]

margin:0; er bij zetten

[P_de_B]

Staat erbij, maar helpt niet.

[crisp]

Ik had toch ook gezegd dat je het *alleen* voor IE zo moest doen?

Anyway, je doet de ruimte ertussen nu mbv <br>'s - die zijn daar natuurlijk niet voor bedoelt. Probeer het eens met een margin op je .nav

[t-x-m]

Ik heb het een keer zo opgelost:

HTML:

<!--[if IE]>
    <style type="text/css">
    li {
        margin-top:-5px;
    }
    </style>
<![endif]-->

[ Voor 5% gewijzigd door t-x-m op 18-08-2006 12:30 ]

[crisp]

T-X-M schreef op vrijdag 18 augustus 2006 @ 12:30:
Ik heb het een keer zo opgelost:

HTML:

<!--[if IE]>
    <style type="text/css">
    li {
        margin-top:-5px;
    }
    </style>
<![endif]-->

Dat is symptoom-bestrijding. Besides, wat als het in een toekomstige versie van IE gefixed wordt?

[P_de_B]

Nou, ik snap er niks meer van. Ik heb de <br> weggehaald, en een margin-bottom op de UL gezet. Dit werkt netjes in FF. In IE werkt het bij de ene overgang wel (die staan los van elkaar) maar bij de volgende niet, terwijl het dezelfde code is. Ook zie je dat de H1 in ieder menublok iets verspringt.



Waarom zit er wel ruimte tussen 'Daniek' en 'Archief' en niet tussen de overige menuelementen?

[moozzuzz]

mss whitespace?

HTML:

<div class="navi">
<!-- cut -->
<div class="nav">
<h1>Onderwerpen</h1>
<ul>
    <li><a href="http://link/" title="text">Daniek</a>
</li>
</ul>
</div>

<div class="nav">
<h1>Archief</h1>
<ul>
    <li><a href='http://link' title='September 2005'>September 2005</a></li>
    <li><a href='http://link' title='Augustus 2005'>Augustus 2005</a></li>
    <li><a href='http://link' title='Juli 2005'>Juli 2005</a></li>
    <li><a href='http://link' title='Juni 2005'>Juni 2005</a></li>
<!-- cut -->
</ul>
</div>
<!-- cut -->

</div>

Bij daniek staat de </li> op een volgende lijn in tegenstelling tot de rest. Je gebruik van ' en " is ook niet even consistent :^)

[ Voor 95% gewijzigd door moozzuzz op 18-08-2006 15:43 ]

[crisp]

An als je de margin op je .nav zet in plaats van op de ul?
Misschien wat spelen met dingen die hasLayout forceren? IE's bugs zijn soms ondoorgrondelijk....

Het is zo jammer dat IE niet iets van een add-on heeft dat je live CSS aanpassingen kan doen...

[ Voor 24% gewijzigd door crisp op 18-08-2006 16:15 ]

[P_de_B]

Margin op .nav helpt ookt niet. IE

Nou, ik zie al wel dat dit niet een foutief gemaakte css is maar een IE bug. Ik zal wel even met een hele kale opzet beginnen, en kijken of ik dan kan zien waar het fout gaat.

Dank in ieder geval tot zover, en als iemand nog een idee heeft houd ik me aanbevolen.

[crisp]

Het is dus zeker weten een hasLayout fout, want als ik bijvoorbeeld .nav ook nog een width of height geef dan gaat de margin ineens wel goed

[P_de_B]

Je hebt gelijk, ik heb in de IE style een hoogte en breedte voor .nav toegevoegd en nu pakt hij de marge wel. Het rare is wel dat er nu op de plek waar eerst ook al ruimte was (tussen Daniek en archief) er nu dubbel zo veel ruimte zit. Ik kan niet aan de HTML ontdekken waarom dat anders zou moeten zijn dan de rest.

Dank tot zover!