[CSS] ‘Meter’ blijft leeg in FireFox

[Icelus]

Ik probeer een simpele voortgangsmeter te maken in CSS:

Cascading Stylesheet:

.gauge {
  border: 1px solid black;
  height: 1em;
  background-color: white;
}

.gauge .fill {
  background-color: darkblue;
}

HTML:

<div style="width: 30%">
  <div class="gauge">
    <span class="fill" style="width: 70%"></span>
  </div>
  Percentage: 70%.
</div>

In Explorer krijg ik een rechthoek die voor 70% donkerblauw is en voor 30% wit. In FireFox blijft de rechthoek volledig wit.
De span vullen met tekst helpt wel (klein deel wordt donkerblauw). Heeft iemand een oplossing?

[killercow]

Span's kunnen geen breedte hebben, een span is een inline element, geen clock element.

als je de span een disaply:block geeft moet alles goed komen.

[Icelus]

Dat scheelt behoorlijk
Heb meteen height naar .fill verplaatst (anders overschrijft de vulling de onderkant van de rechthoek).

[RM-rf]

killercow schreef op dinsdag 12 september 2006 @ 11:51:
Span's kunnen geen breedte hebben, een span is een inline element, geen clock element.

als je de span een disaply:block geeft moet alles goed komen.

daarnaast zou ik zeker ook een hoogte en het liefst nog position definieren:

code:

.gauge.fill {
   position: relative;
   height: 100%;
   display: block;
}

[Rowanov]

Waarom een position relative? Ik ben wel benieuwd welke argumentatie of andere wijsheid daarachter zit Zelf zou ik het weglaten zolang het niet nodig is en het in Opera, FF en IE gewoon goed weergegeven wordt.