[js]Mozilla div met width 100% breder dan parent

[Verwijderd]

Ik heb een div in een td zodat ik een mooie dotted border over de td kan leggen zodat ik zelf beide kleuren die in de border gebruikt worden kan bepalen. Probleem is echter dat ik in mozilla met geen mogelijkheid die div netjes binnen die td krijg:

code:

<style>
    td{
        color: #ffffff;
        background-color: #0a246a;
        display: block;
    }

    div{
        font-family: Microsoft Sans Serif;
        font-size: 10px;
        padding-top: 0px;
        padding-left: 3px;
        padding-right: 3px;
        padding-bottom: 1px;
        width: 100%;
        height: 100%;
        border: 1px dotted #f5db95;
        overflow: hidden;
    }
</style>

Het volgende krijg ik als resultaat in Mozilla:


En hier kan je de pagina bekijken.

Er zitten nog wel wat bugs in dus daar moet je even niet op letten, maar het gaat dus om die gele border bij een option in mozilla.

Die display: block maakt het al iets beter want daardoor past ie verticaal wel goed, maar horizontaal dus niet.

Hoe los ik dit op?

[crisp]

totale breedte = width + padding + borders (W3C boxmodel)
Hoe je het oplost: geen breedte opgeven, een blocklevel element 'pakt' automatisch al de gehele beschikbare breedte

[ Voor 52% gewijzigd door crisp op 10-05-2006 19:13 ]

[Verwijderd]

Inderdaad, top!

Ik wist niet dat block level elementen altijd de totaal breedte pakken, maar het lost wel een probleem op waar ik vaker last van heb.

Bedankt.