[CSS] Ruimte van 2px onder LI in IE

[Amras]

Ben druk met een site bezig en zit met een CSS probleempje: ik heb een unordered
list met daarin vier elementen, nu krijg ik in IE een extra ruimte van 2px onder de
laatste 3 elementen. De eerste ziet er wel goed uit. In Mozilla Firefox gaat
alles goed. Ter illustratie:



De relevante HTML:

HTML:

<ul id="reisverhaalgroepen">
  <li class="reisverhaalgroep" onmouseover="hover(this)" onmouseout="hover(this)">
    <span>Sydney</span>
    <dl class="info">
      <dt>Aantal:</dt><dd>2</dd>
      <dt>Laatste update:</dt><dd>10/11/2004</dd>
    </dl>
  </li>
  <li class="reisverhaalgroep" onmouseover="hover(this)" onmouseout="hover(this)">
    <span>Melbourne</span>
    <dl class="info">
      <dt>Aantal:</dt><dd>0</dd>
      <dt>Laatste update:</dt><dd>10/11/2004</dd>
    </dl>
  </li>
  ...
</ul>

De relevante CSS:

Cascading Stylesheet:

ul {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

#container div#content ul#reisverhaalgroepen {
    border-top:         1px solid black;
    border-left:        1px solid black;
    border-right:       1px solid black;
}

#container div#content ul#reisverhaalgroepen li.reisverhaalgroep {
    cursor:             pointer;
    border-bottom:      1px solid black;
    font-size:          10px;
    height:             30px;
    background-color:   #ffffdd;
}

#container div#content ul#reisverhaalgroepen li.reisverhaalgroep span {
    font-weight:        bold;
    font-size:          12px;
    color:              #003366;
}

#container div#content ul#reisverhaalgroepen li.reisverhaalgroep dl.info {
    clear:              left;
    margin:             0px;
}

#container div#content ul#reisverhaalgroepen li.reisverhaalgroep dl.info * {
    float:              left;
    width:              134px;
    margin:             0;
}

Overige informatie:
1. Ik heb hier op GoT gezocht, hier vond ik een suggestie om de LI een display:
inline te geven. Dit heeft echter niet het gewenste effect omdat de DL er dan
buiten valt. Ook een suggestie om wat met white-space te doen had geen effect.
2. Als ik de DL weghaal uit de HTML, dan geven beide browser de lijst goed weer.
Ik weet dus dat het daar ergens moet zitten, maar zou niet weten waar het nu
precies aan ligt.
3. Ik heb in plaats van de DL ook geprobeerd of het met DIV's wel goed ging, kreeg echter precies hetzelfde probleem.
4. Ik gebruik een XHTML 1.0 Strict doctype.

Heeft iemand een suggestie?

[André]

Misschien is de line-height van de DL, DT of DD te hoog?

[Amras]

André schreef op 11 oktober 2004 @ 14:45:
Misschien is de line-height van de DL, DT of DD te hoog?

Ik heb het even geprobeerd: heb de line-height op 0 en 10px getest op de dl.info en z'n kinderen. Beide waarden hadden geen effect op de ruimte dus de LI elementen.

edit:

@ crisp hieronder: hmmm.. lekker dan, zit er al een tijdje naar te staren. Zou graag die work-around zien...

[ Voor 18% gewijzigd door Amras op 11-10-2004 15:26 ]

[crisp]

Wat het is is heel simpel 1 van de vele IE renderbugs. Ik ben deze ook al eens tegengekomen; * crisp gaat even graven wat hiervoor ook alweer de work-around was...

[crisp]

Je <dl> een display:inline geven lost het probleem hier in IE5.5 (waarvan ik weet dat hij andere bugs heeft dan IE6) al voor een deel op.
Wellicht dat je hier ook nog wat aan hebt: http://www.positioniseverything.net/explorer/ie-listbug.html

[Amras]

Probleem verholpen! Met een display:inline in DL werkt het prima in IE6! Bedankt!

[crisp]

Amras schreef op 11 oktober 2004 @ 15:45:
Probleem verholpen! Met een display:inline in DL werkt het prima in IE6! Bedankt!

Dat vermoeden had ik al; bedenk echter dat het dan in IE5.5 nog niet helemaal 100% is, maar ervaring heeft mij geleert dat dergelijke problemen in IE5.5 (en IE5.0 helemaal) af en toe gewoon onoplosbaar zijn...

[Amras]

crisp schreef op 11 oktober 2004 @ 16:02:
[...]

Dat vermoeden had ik al; bedenk echter dat het dan in IE5.5 nog niet helemaal 100% is, maar ervaring heeft mij geleert dat dergelijke problemen in IE5.5 (en IE5.0 helemaal) af en toe gewoon onoplosbaar zijn...

Ik moet eerlijk bekennen dat ik m'n sites eigenlijk alleen check in Mozilla Firefox en Internet Explorer 6. Heb nu sinds kort ook Opera geinstalleerd, dus daar hoop ik deze site ook werkend in te krijgen. Als ik tijd over heb zal ik misschien nog even met IE 5.5 stoeien.