[css] <ul> met list-style:outside; werkt niet goed in IE

[wizzkizz]

Voor een navigatiemenu heb ik de volgende (dynamisch gegenereerde) code:

HTML:

<div class="menu-small" id="body">
    <div class="menu-small" id="head">Navigatie</div>
    <ul>
        <li><a href="open.asp?topic=30">Inleiding</a></li>
        <li><a href="open.asp?topic=31">Grondbeleid gemeente</a></li>
        <li><a href="open.asp?topic=32">Ruimtelijk beleid</a></li>
        <li><a href="open.asp?topic=48">Ruimtelijk beleid (2)</a></li>
        <li><a href="open.asp?topic=49" >Ruimtelijk beleid (3)</a></li>
        <li><a href="open.asp?topic=33">Wonen</a></li>
        <li><a href="open.asp?topic=34">Verkeer en vervoer</a></li>
        <li><a href="open.asp?topic=50">Verkeer en vervoer (2)</a></li>
    </ul>
</div>

mijn css is als volgt:

Cascading Stylesheet:

div.menu-small#body ul  {margin: 0px; margin-left: 15px; padding:0px; list-style: outside;}
div.menu-small#body ol  {margin: 0px; margin-left: 25px; padding:0px; list-style: outside;}
div.menu-small#body li  {width:100%; }

Het is dus de bedoeling dat de link in het navigatiemenuutje een width van 100% van de bovenliggende div heeft. Dit lukt ook wel, maar dan geeft IE de opsommingstekens aan de onderkant van een meerregelig <li> weer, terwijl die gewoon aan de bovenkant moet zitten. Als ik de width:100% weghaal, is er geen probleem, maar die moet er eigenlijk wel blijven staan.

offtopic:
In Mozilla staan de opsommingstekens wel goed, maar werkt de width:100% sowieso niet goed

situatie zonder width:100%:


situatie met width:100%:


gewenste situatie:


Wil iemand me helpen? BDV

[ Voor 75% gewijzigd door wizzkizz op 03-03-2004 16:52 . Reden: breedte iets veriendelijker gemaakt ]

[Verwijderd]

code:

li{display:block;}

[wizzkizz]

dankje, met nog wat line-height's erbij is het gelukt. beetje dom dat ik daar zelf niet aan gedacht heb

en hij werkt nu in zowel IE als Mozilla als Opera

m'n css is nu:

Cascading Stylesheet:

div.menu-small#body ul  {margin: 0px; margin-left: 15px; padding:0px; list-style: outside;}
div.menu-small#body ol  {margin: 0px; margin-left: 25px; padding:0px; list-style: outside;}
div.menu-small#body li  {line-height: 0px;}
div.menu-small#body a   {display:block; line-height: normal;}

[ Voor 57% gewijzigd door wizzkizz op 03-03-2004 17:15 ]

[kleautviool]

Het is toch list-style-position: outside i.p.v. list-style: outside ?

[wizzkizz]

kleautviool schreef op 03 maart 2004 @ 17:33:
Het is toch list-style-position: outside i.p.v. list-style: outside ?

Werkt net als bijvoorbeeld font: verdana. Hoewel het mss niet erg netjes is, werkt het wel goed. En ik heb het rechtstreeks van de site van w3c, dus zal het wel goed zijn

code:

'list-style'
    Value:      [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
    Initial:    not defined for shorthand properties
    Applies to:     elements with 'display: list-item'