(CSS/IE) Mysterieuze witruimte in IE onder UL bij padding LI

[Verwijderd]

Wanneer ik de LI's in onderstaande HTML een padding-bottom geef, komt er een regel witruimte tussen de 2e image (border_bottom.jpg) en het einde van de DIV. Als ik enkel de padding-bottom op 0px zet is deze witruimte er niet.....

Heeft iemand dit probleem al eens gehad??

Ik gebruik doctype XHTML 1.0 Strict. Dit probleem komt alleen voor in IE...in Firefox zijn de marges prima...

De HTML:

code:

<div id="podcast">
    <h2>Podcast</h2>
    <img src="http://dc5.freshheads.com/images/border_top.jpg" alt="" />
    <ul>
        <li>Lijst-item 1</li>
    </ul>
    <img src="http://dc5.freshheads.com/images/border_bottom.jpg" alt="" />
</div>

De relevante CSS tags:

code:

ul, ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

li {
    padding: 0px;
}

div#podcast ul li {
    background-image: url('/images/border_back.jpg');
    padding: 2px 7px 2px 7px;
}

[ Voor 4% gewijzigd door Verwijderd op 11-12-2007 12:48 ]

[zwippie]

Er is net iemand met hetzelfde probleem.

[Verwijderd]

Dit probleem is niet precies hetzelfde. Bij hem gaat het om witruimte tussen de LI's; bij mij gaat het om 1 regel witruimte na de UL (zelfs na de 2e image)...

[BtM909]

Afhankelijk van wat je doet, zou het een van deze kunnen zijn:

http://www.positionisever...explorer/threepxtest.html

http://www.positionisever...lorer/doubled-margin.html

Sowieso handig om PositionIsEverything in de gaten te houden als het gaat om IE bugs

[MueR]

Probeer dit eens:

code:

<div id="podcast">
    <h2>Podcast</h2>
    <img src="http://dc5.freshheads.com/images/border_top.jpg" alt="" />
    <ul>
        <li>Lijst-item 1</li>
    </ul><img src="http://dc5.freshheads.com/images/border_bottom.jpg" alt="" />
</div>

Dit probleem kwamen wij laatst tegen in een site voor een klant. IE had ineens moeite met whitespace tussen elementen op sommige plaatsen (op andere plaatsen in de site ging het gewoon goed).

[Verwijderd]

MueR schreef op dinsdag 11 december 2007 @ 13:55:
Probeer dit eens:

code:

<div id="podcast">
    <h2>Podcast</h2>
    <img src="http://dc5.freshheads.com/images/border_top.jpg" alt="" />
    <ul>
        <li>Lijst-item 1</li>
    </ul><img src="http://dc5.freshheads.com/images/border_bottom.jpg" alt="" />
</div>

Dit probleem kwamen wij laatst tegen in een site voor een klant. IE had ineens moeite met whitespace tussen elementen op sommige plaatsen (op andere plaatsen in de site ging het gewoon goed).

Dit heeft helaas geen effect... Ook de bovenstaande PositionIsEverything linkjes is niet hetzelfde probleem...

Als ik de 2e image weglaat is het probleem er btw ook niet...

[ Voor 4% gewijzigd door Verwijderd op 11-12-2007 14:34 ]

[Verwijderd]

Problem solved!

Mn IMG tags hadden 'vertical-align: bottom;'. Na dit verwijderd te hebben treedt het probleem niet meer op...