[css] IE geeft het niet goed weer

[Phenomenon]

Ik ben bezig om een reactie blok te maken voor mijn website, alleen blijft Internet Explorer het foutief weergeven, in Firefox wordt het verder wel goed weergegeven.

HTML:

<div id="reacties">
    <ul>
        <li><div class="time">9:35</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">5:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">18:44</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>      
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">12:12</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
        <li><div class="time">10:45</div><a href="#">jdj jdjjd jdjd jd jd</a></li>              
    </ul>
</div>

HTML voor het reactieblok

Cascading Stylesheet:

#reacties {
    background: url(images/back_reacties.jpg) no-repeat;
    font-size:10px;     
}

#reacties ul {
    padding: 0px;
    margin: 0px;
}

#reacties .time {
    float: left;
    display: inline;
    margin-right: 2px;
    width: 33px;
    border-right: 1px Solid Black;
    background-color: #838E94;
    color: #fff;
    font-weight: bold;  
}

Css

In Internet Explorer blijft er een wit stukje onder de tijden staan. Ik zou dit graag net zoals in Firefox zien, dat je het dus zeg maar als kolommen ziet. Hoe krijg ik dit goed in IE?

Voorbeeld:http://www.burnincows.nl/test/reacties.html

[ Voor 32% gewijzigd door Phenomenon op 20-09-2005 14:59 ]

[Phenomenon]

Hmmm zit wat verder te zoeken etc en toen kwam ik tegen dat inline div geen hoogte kan meegeven. Dus doet IE het hier soms 'goed'?

[Jerry]

Als je alle regels die je hebt achter elkaar zet dan wordt het ook goed weergegeven in IE .
Dit "bugje" had ik namelijk ook in mijn menu, want IE zet de enters ook om naar enters in je webpagina (dit geldt alleen voor <ul><li> gevallen geloof ik).

Oeps . Niet goed gecontroleerd.

[ Voor 151% gewijzigd door Jerry op 20-09-2005 16:57 ]

[Phenomenon]

Eeehm bij mij niet hoor.

Het gaat om het witstuk onder de tijd hè. En die oplossing die jij zegt, zou eigenlijk helemaal niets uit moeten maken ja.

Het is me nu wel gelukt om het zowel in firefox of als in IE goed weer te geven, maar dan maar ik geen gebruik van <ul><li>, maar dit wil ik eigenlijk wel....

[crisp]

Cascading Stylesheet:

#reacties ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#reacties ul li {
    float: left;
    clear: both;
}

[JayVee]

Geen oplossing voor het probleem, wel een aanmerking op je HTML.
In plaats van

code:

<li><div class="time">9:35</div><a href="#">jdj jdjjd jdjd jd jd</a></li>

zou ik toch voor

code:

<li><span class="time">9:35</span><a href="#">jdj jdjjd jdjd jd jd</a></li>

gaan. Even makkelijk te stylen, een standaard een inline element ipv block level. Semantisch natuurlijk ook wat logischer dan een "div" voor elk datum.

[Noork]

Geen oplossing, maar ook nog een opmerking. Opera geeft het ook niet weer zoals bedoeld hebt.