[HTML/CSS] IE toont soms extra witruimte

[f.v.b]

Vandaag weer iets vreemds tegengekomen in IE.

Een geldig stukje HTML staat een aantal keer in een pagina. De eerste keer wordt het correct getekend. De tweede keer besluit IE om er ergens extra witruimte tussen te zetten.

Zet je in de HTML een non-breaking space op de plek waar de tweede keer de witruimte staat, verdwijnt de witruimte weer...

Hier staat een testpagina:

http://fvb.waxtrapp.com/testhtmlfrank/whitespaceinie.html

Firefox en Safari doen het beiden goed. Opera 8.54 toont ook de extra witruimte tenzij je een non-breaking space erin zet...

In de testpagina is het probleem te verhelpen door een float of een border op de <ul> te zetten. In de site waar we dit probleem tegenkwamen, helpen die oplossingen niet.

[Bitage]

HTML:

<!--[if IE]><style>
ul
{
margin-bottom:-20px;
}
</style><![endif]-->

Lost het hier op.

[f.v.b]

In de site waar dit probleem zich voordoet werkt alleen de non-breaking space oplossing. De ul heeft al een margin: 0px, en een border. Ik had mijn vraag beter moeten formuleren.

Kent iemand dit probleem, en is er een bullet proof oplossing? De non-breaking space werkt in dit geval, maar is compleet onlogisch.

[Bozozo]

Ik zou me eerder afvragen waarom float: left op de ul niet werkt op die andere pagina. Eventueel kun je nog overflow: auto (of visible of hidden, weet het niet precies) opgeven zodat de list items daadwerkelijk in de ul terechtkomen.

Die nbsp lijkt me geen goed idee, dat is de ene bug met de andere verstoppen waardoor je site een onvoorspelbare rendersoep wordt.

[f.v.b]

Bij het onderzoeken van weer een ander layout probleem in unordered lists kwam ik de volgende pagina's tegen:

http://www.brunildo.org/test/IEul1.html
http://www.brunildo.org/test/IEWlispace.php

Vooral de tweede pagina lijkt hier van toepassing. Heelaas wordt er geen bullitproof oplossing beschreven.

De nbsp oplossing verdient zeker geen schoonheidsprijs, maar als je in je code documenteert waarom je deze oplossing gebruikt valt het volgens mij wel mee.

Ik zal de float: left op de ul ook nog proberen. Die bleek vandaag op een ander project ook de enige oplossing.