[CSS] IE 6.0 border rendering fout bij <li> zonder height

[DerKleinePunkt]

Ik ben nog steeds hard aan het testen met css en xHtml en het bevalt me prima tot nu toe.Maar momenteel zit ik een IE 6.0 probleem.De volledige test pagina is xhtml 1.0 strict bevonden door de W3C validator en de CSS is ook goedgekeurd.

Ik heb het volgende stukje xHtml:

code:

<div id="einMenu">
 <ul>
   <li><a href="" title="Klik mich!">Du darfst mich beklikken!</a></li>
   </li>
 </ul>
</div>

Daarbij heb ik de volgende css code:

code:

#einMenu
{
    top: 0px;
    left: 0px;
    position: relative;
    width: 175px;
    float: left
}

#einMenu ul
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    background-color: red
}

#einMenu li
{
    /*height: 19px;  Zonder height begint IE te trippen?*/
    border-top: none;
    border-right: #000000 1px dotted;
    border-bottom: #000000 1px solid;
    border-left: none;
    padding: 4px 4px 4px 4px;
    list-style-type: none;
    font-size: 14px
}

Het probleem doet zich voor bij het <li> element. Wanneer ik de bovenstaande pagina open in IE 6.0 (zonder height bij <li>), dan worden de borders pas weergegeven nadat ik met de muiscursor over de link ga. Wanneer ik binnen de pagina omhoog en omlaag scroll, worden de randen wel weergegeven. Maar het kan nog gekker, het eerste menu item slaat IE 6.0 gewoon over m.a.w. die is en blijft borderloos.

Ik heb het volgende geprobeerd:
- Het <a> element weghalen, geen verandering<br>
- Het <li> element volledig omringen met een border, geen verandering<br>
- Gezocht (en nog zoekende) via Google en op GoT, maar nog geen passende oplossing kunnen vinden<br>
- Height meegegeven, de pagina werkt juist<br>

Dus graag julllie hulp bij het bovenstaande probleem.

[Verwijderd]

Voeg is 'display:block' toe ofzo. Op het LI element.Stel je ergens toevallig nog 'line-height' in?

[crisp]

height is 1 van de properties die 'hasLayout' forceert. Je kan voor IE ook gewoon een hele kleine height opgeven (bijvoorbeeld 1% ofzo); het element wordt toch opgerekt. Voor standard compliant browsers overrule je dat gewoon weer naar height: auto

[DerKleinePunkt]

Verwijderd schreef op woensdag 12 januari 2005 @ 16:33:
Voeg is 'display:block' toe ofzo. Op het LI element.Stel je ergens toevallig nog 'line-height' in?

Display:block op zowel het div, lu, li element individueel als gezamelijk toegepast (je moet toch wat), maar het maakt niks uit. Ik heb nergens een line-height ingesteld.

[DerKleinePunkt]

crisp schreef op woensdag 12 januari 2005 @ 16:37:
height is 1 van de properties die 'hasLayout' forceert. Je kan voor IE ook gewoon een hele kleine height opgeven (bijvoorbeeld 1% ofzo); het element wordt toch opgerekt. Voor standard compliant browsers overrule je dat gewoon weer naar height: auto

Ik heb een height:100% meegegeven, dit werkt. Maar dit lijkt me toch niet nodig?

edit:

Bij height auto gaat IE ook de mist in.

[ Voor 13% gewijzigd door DerKleinePunkt op 12-01-2005 17:00 ]

[Woudloper]

Overigens sluit je in je voorbeeld de LI tag 2 x af...

[DerKleinePunkt]

Dat met die li is juist, kleine fout bij het knippen en plakken van een stukje code.

edit:

IE 6.0 moet zich maar eens aan de strict regels houden, geen height is gelijk aan height 100%

[ Voor 46% gewijzigd door DerKleinePunkt op 13-01-2005 14:21 ]