[css] IE geeft rare witte ruimte tussen div en img FF niet

[BasieP]

het zal vast wel weer iets met css te maken hebben, maar ik kan het niet vinden..

heb een test siteje gemaakt:
http://basiep.dyndns.org/test.php
met daarbij de css
http://basiep.dyndns.org/style.css

ik heb nu zegmaar een plaatje, daaronder een div, en daaronder weer een plaatje.
die 2 plaatjes zijn de header en footer van de div zegmaar. de div is in dit geval een menutje, maar kan natuurlijk alles zijn.

de div heeft nu rechts en links een border van 1 pix, en een padding van een aantal pixels voor de text.
ik plaats de plaatjes buiten de div omdat ze anders binnen de border/padding vallen.

ik heb al geprobeerd om de plaatjes ook binnen een div te plaatsen, maar dan hou ik de rand (hij zit dus om het plaatje heen)
ik zou het natuurlijk het liefst zonder hacks fixen, maar kom er niet uit. Misschien heeft iemand een idee

[ Voor 12% gewijzigd door BasieP op 23-10-2005 15:48 ]

[André]

Ik denk dat het gewone white-space is: zet de div eens achter je img in de code

[BasieP]

André schreef op zondag 23 oktober 2005 @ 15:49:
Ik denk dat het gewone white-space is: zet de div eens achter je img in de code

??
de div staat achter de img?
(en voor die andere img) ah zo

nee dat is het niet, heb het nu 'achter elkaar' geplakt.
Trouwens zou het dan goed moeten gaan als ik een div om de img gezet had.. maar dat gaat ook fout

[ Voor 35% gewijzigd door BasieP op 23-10-2005 15:52 ]

[crisp]

Geef je images een vertical-align: bottom;
Het probleem wordt veroorzaakt door het feit dat images normaliter op de baseline worden uitgelijnt, en IE textNodes met enkel whitespace ook rendered.

[BasieP]

crisp schreef op zondag 23 oktober 2005 @ 15:51:
Geef je images een vertical-align: bottom;
Het probleem wordt veroorzaakt door het feit dat images normaliter op de baseline worden uitgelijnt, en IE textNodes met enkel whitespace ook rendered.

woei dat werkt idd
natuurlijk moet de onderste img dan een vertical-align: top; krijgen

was dus eigenlijk (weer) een stom kutprobleempje dat je maar net moet weten

[ Voor 10% gewijzigd door BasieP op 23-10-2005 15:56 ]

[crisp]

Je images display:block geven zal ws ook wel helpen hier (zolang de images niet lager zijn dan de default line-height).
Ik zou in dit geval echter helemaal geen images gebruiken, maar je top image als background zetten van je div; een list gebruiken voor je menu en de bottom image achtergrond maken van de ul.
Het woordje 'menu' zou ik in een header tag zetten, of in een legend (ism een fieldset ipv de div).

[ Voor 14% gewijzigd door crisp op 23-10-2005 16:08 ]

[BasieP]

crisp schreef op zondag 23 oktober 2005 @ 16:06:
Je images display:block geven zal ws ook wel helpen hier (zolang de images niet lager zijn dan de default line-height).
Ik zou in dit geval echter helemaal geen images gebruiken, maar je top image als background zetten van je div; een list gebruiken voor je menu en de bottom image achtergrond maken van de ul.
Het woordje 'menu' zou ik in een header tag zetten, of in een legend (ism een fieldset ipv de div).

klinkt ingewikkelder dan images, maar het zou idd kunnen, het probleem is dat dit een voorbeeld is van 1 'menu' blokje, maar ik heb er meer. ook met daarin plaatjes e.d. dus een list zou in veel gevallen niet netjes zijn.
verder heb ik bijv ook in het midden een berg text met daarop een 'header plaatje'
zie http://tent75.nl

[crisp]

Da's te overzien hoor; voorbeeldje:

HTML:

<div class="menu">
    <h4>Menu</h4>
    <div>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
</div>

Cascading Stylesheet:

div.menu {
    width: 135px;
    padding-top: 23px;
    background: url(http://basiep.dyndns.org/left_top.png) no-repeat top;
}
div.menu h4 {
    background-color: #B0EB77;
    padding: 1px 2px;
    margin: 0px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    font-size: 12px;
    font-weight: bold;
}
div.menu div {
    padding-bottom: 11px;
    background: #B0EB77 url(http://basiep.dyndns.org/left_bottom.png) no-repeat bottom;
}
div.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
div.menu ul li a {
    display: block;
    padding: 1px 2px;
    _height: 1%;
}