[html /css] - definition list height problem

[Verwijderd]

Hi mensen,

ik ben eens aan het kijken naar definition lists.
Lijkt me een heel simpel dingetje om te stylen maar ik word helemaal kriegel van het volgende probleem.

Ik heb zowel de hoogte van de dl, dt als dd ingesteld op 100px;
Maar toch wordt de hoogte gerenderd op 102px;
Dat komt door blijkbaar door het foto'tje maar ook die staat op 100px!

Dit probleem doet zich echter alleen voor in IE, in FF doet ie t prima.

zie http://www.raketje.com/tweakers/test.php

Heeft iemand enig idee?
Thanks

Cascading Stylesheet:

        body
    {
        margin: 0px 0px 0px 0px;
        padding: 40px 0px 0px 40px;
        width: 500px;
        font: 90% arial, sans-serif;
    }
        
    dl
    {
        width: 500px;
        height:100px;
        margin: 40px 0px 0px 00px;
        padding: 0px 0px 0px 0px;
        border:0px;
    }
    
    dt
    {
        width: 200px;
        height:100px;
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-weight: bold;
        background-color:#FF0000;
        border:0px;
    }
    
    /* commented backslash hack for mac-ie5 \*/
    dt { clear: both; }
    /* end hack */

    dd
    {
        float: left;
        width: 300px;
        height:100px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color:#00FF00;
        border:0px;
    }

HTML:

<dl>

    <dt><img src="afbeelding.gif" height="100px" border="0"></dt>
    <dd>Nisl ut aliquip ex ea commodo consequat</dd>

</dl>
<dl>

    <dt><img src="afbeelding.gif" height="100px" border="0"></dt>
    <dd>Nisl ut aliquip ex ea commodo consequat</dd>

</dl>
<dl>

    <dt><img src="afbeelding.gif" height="100px" border="0"></dt>
    <dd>Nisl ut aliquip ex ea commodo consequat</dd>

</dl>

[ Voor 13% gewijzigd door Verwijderd op 26-01-2008 18:29 ]

[Verwijderd]

Hi mensen,

ik heb nog verder gegoogled maar ik kom er maar niet achter waarom ik die 2 pixels er gratis bij krijg.

Iemand een suggestie?

thanks

[DeZzL]

Misschien niet de netste manier, maar wat nou als je op die DT nou eens een overflow:hidden zet?

[ Voor 20% gewijzigd door DeZzL op 28-01-2008 13:15 ]

[The_Ghost]

zet op de img eens

Cascading Stylesheet:

vertical-align: middle;

ik weet het niet 100% zeker, maar volgens mij heeft dit te maken met het feit dat een img inline is. Ook display: block; helpt..

[ Voor 2% gewijzigd door The_Ghost op 28-01-2008 13:20 . Reden: ubb, moeilijk etc. ]

[Verwijderd]

DeZzl,

thanks! Dat was 'm...

Nu nog s uitvissen waarom er nou 2px bijkomen