[html/css] Progressbar maken

[_Thanatos_]

Ik heb een progressbar nodig. Ik gebruik voor het gemak XHTML 1.1 en ik wil niet verder gaan dan CSS level 2. De progressbar komt in de cel van een veel grotere tabel te staan en ik wilde em simpel houden door geen plaatje te gebruiken en dat in breedte te variëren.

Ik heb de volgende code bedacht:

HTML:

<div class="percentdone" style="width: 50%">&nbsp;</div>

De percentdone class geeft alleen nog maar 100% height en een zwarte achtergronkleur aan.

Wat gaat er fout:
Het meest ergerende is dat MSIE dit grondig vernaggelt als de width heel laag is, desnoods 0%. Dan wordt ie toch een paar pixels breed. Nou prima, dan haal je die hele div weg, zou je denken. Klopt, maar bij 1 of 2% gaat die vlieger dus niet op, want dan wordt ie natuurlijk te breed. Het ziet er misschien ook raar uit dat er een nbsp in de div zit, maar als een div leeg is, wordt ie helemaal niet gerenderd, ongeacht de breedte of hoogte. Overigens renderen Opera en Mozilla dit wel correct.

Wie weet een workaround? Zonder browserafhankelijke of propriëtaire code uiteraard

[Pelle]

Probeer eens een font-size van 1px op te geven? Of 0px werkt misschien ook wel zelfs.

[Johnny]

of overflow: hidden; waarmee content (de spatie) gewoon "verdwijnen" als ze buiten de container vallen.

[Exterazzo]

En als je ipv die   een transparante gif/png doet van 1x1 pixel?

[_Thanatos_]

font-size instellen op 0 of 1px zorgt ervoor dat ie juist maar een paar pixels hoog wordt. Lang leve alle MSIE-bugs

Maar, overflow:hidden lijkt prima te werken

[drm]

_Thanatos_:
font-size instellen op 0 of 1px zorgt ervoor dat ie juist maar een paar pixels hoog wordt. Lang leve alle MSIE-bugs

Euh, je zet er zelf een non-breaking space in, nou moet je niet IE de schuld gaan geven

[Bosmonster]

Waarom heb ik die IE-bugs nooit?

code:

<div style="width:200px;height:2px;overflow:hidden;background-color:#000;">
<div style="width:1%;height:2px;overflow:hidden;background-color:#f00;"></div>
</div>

Gewoon netjes 2 pixels breed...

[edit]
Argh... GoT verneukt m'n html weer eens... in een los bestand werkt dit prima

[ Voor 23% gewijzigd door Bosmonster op 24-03-2004 09:37 ]

[Pelle]

Komt omdat er een nl2br functie hier gebruikt wordt... doe je code even op 1 regel zetten, en het werkt wel.. n00b!

[Bosmonster]

Ah is dat het

groetjes,

GoT noep

[_Thanatos_]

Euh, je zet er zelf een non-breaking space in, nou moet je niet IE de schuld gaan geven

Stylesheet-regels horen normale flow-regels te overrulen, dus de HTML en CSS in mijn startpost had wel degelijk correct moeten renderen.

[drm]

_Thanatos_:
Stylesheet-regels horen normale flow-regels te overrulen, dus de HTML en CSS in mijn startpost had wel degelijk correct moeten renderen.

Het moet altijd correct renderen () maar het is niet weer een rare MSIE bug, het is gewoon de foute interpretatie van de width-rule door IE (wordt zonder overflow als min-width geinterpreteerd). En die is toch al wel een tijdje bekend, dacht ik

Maar je hebt wel gelijk, dat MSIE dat fout doet

[crisp]

Ik gebruik voor het gemak XHTML 1.1 en ik wil niet verder gaan dan CSS level 2. De progressbar komt in de cel van een veel grotere tabel te staan[...]

Begrijp ik hieruit dat je een tabel gebruikt om je progressbar te positioneren? Dan snap ik niet waarom je "voor het gemak" XHTML 1.1 gebruikt, want dan blijft het tag-soup

[_Thanatos_]

Nee, het is gewoon een data-tabel, net als een spreadsheet dus zegmaar. Maar een van de kolommen bevat niet tekst, maar zo'n progresbarretje

[ Voor 4% gewijzigd door _Thanatos_ op 24-03-2004 22:38 ]