[CSS] Progressbar inline

[xilent_xage]

Hoi,

Ik loop inmiddels al de hele dag te worstelen met een klein pieledingetje: frustrerend! Ik hoop dan ook dat iemand hier het ei van Columbus heeft!

In mijn pagina met zoekresultaten wil ik per zoekresultaat de score van het resultaat meegeven. Een zoekresultaat ziet er qua HTML zo uit:

HTML:

<li>
    <a class="result" href="/url_naar_pagina.html">Pagina titel</a>
    <p class="description">
        <span class="searchscore" title="Score: 80%">
            <span class="searchscore_score" style="width:8px;">Score: 80%</span>
        </span>
        Hier de beschrijving van de pagina...
    </p>
</li>

Zoals je ziet wil ik de score grafisch en inline weergeven. De tekst in de span wil ik natuurlijk niet weergeven, deze staat er voor de accessibility zonder CSS. De breedte van de tweede span wordt aangepast aan de score (bedankt, smarty!). Omdat ik de spans een breedte wil meegeven en toch inline wil blijven moet ik werken met inline-block...

Cascading Stylesheet:

span.searchscore{
    display:inline-block;
    width:10px;
    border:1px solid #DDD;
    height:4px;
    padding:0;
    margin:0 4px 0;
    cursor:default;
}
span.searchscore_score{
    border:none;
    font-size:0;
    background-color:#8CC33F;
    height:4px;
}

Resultaat: In FF geeft ie de tweede span helemaal niet weer (dat doet ie wel als ik de font-size groter maak), in IE6 en IE7 geeft ie (heel klein) de tekst nog weer. Bovendien staat in FF het blokje nog duideljijk te hoog, en dit kan ik niet fixen met een margin...

Heb inmiddels zowat alle opties die ik kan bedenken geprobeerd... Wie maakt me los???

[ Voor 0% gewijzigd door xilent_xage op 22-10-2008 15:53 . Reden: typos ]

[RobIII]

xilent_xage schreef op woensdag 22 oktober 2008 @ 15:37:
Omdat ik de spans een breedte wil meegeven en toch inline wil blijven moet ik werken met inline-block...

Of gewoon als block met een float: left

[xilent_xage]

De beschrijving van de pagina is vaak meerdere regels lang. De tweede regel moet 'onder' de progressbar doorlopen. Dus even "grafisch":

[||||||| ] Dit is een lange beschrijving van de pagina om te laten zien wat ik bedoel, ik hoop dat ik niemand de moeite neemt om deze tekst volledig te lezen want er staat verder toch niks belangrijks, het is puur een illustratie.

[OxiMoron]

Geef beide spans een display: block en hij doet het bij mij...

[RobIII]

xilent_xage schreef op woensdag 22 oktober 2008 @ 15:48:
De beschrijving van de pagina is vaak meerdere regels lang. De tweede regel moet 'onder' de progressbar doorlopen. Dus even "grafisch":

[||||||| ] Dit is een lange beschrijving van de pagina om te laten zien wat ik bedoel, ik hoop dat ik niemand de moeite neemt om deze tekst volledig te lezen want er staat verder toch niks belangrijks, het is puur een illustratie.

Dat klopt dan toch als je een float erop zet

[Bosmonster]

Vergeet overigens ook niet dat Firefox 2 geen inline-block ondersteunt. En die browser wordt nog aardig veel gebruikt.

[xilent_xage]

Inderdaad, jullie hebben he-le-maal gelijk! Bedankt!