Problème de largeur ignorée sous Firefox

Bonjour,
voici mon problème, je cherche à faire une sorte de barre de progression à 2 couleurs avec des largeurs fixes (modifiables manuellement dans la css, rien de dynamique) et à aligner cette barre avec du texte sur une même ligne comme ceci:

texte [barre couleur 1 | barre couleur 2] texte

Le problème est que Firefox ignore la propriété width sur les balises de type inline, donc ma barre est bien là sous IE mais invisible sous FF...

Le code html:

<div class="resultat">
   <span>95%</span>
   <div id="barg"></div>
   <div id="bard"></div>
   <span>5%</span>
</div>

avec coté css:

.resultat {
width:250px;
text-align:center;
font:Arial 10pt #000000;
}
#barg {
display:inline;
width:95px;
height:15px;
background-color:green;
}
#bard {
display:inline;
width:5px;
height:15px;
background-color:red;
}

Y a-t-il un moyen de remédier à ce problème? J'ai cherché partout et j'ai trouvé quelques sujets sur l'incompatibilité entre un width fixe et display:inline, mais rien qui m'apporte une solution...

Help please!
Modifié par ToutPourLeTrash (20 Sep 2006 - 16:42)

ToutPourLeTrash a écrit :
Le problème est que Firefox ignore la propriété width sur les balises de type inline, donc ma barre est bien là sous IE mais invisible sous FF...

À vrai dire, tous les navigateurs vont ignorer le propriété CSS width pour un élément de type en-ligne, même Internet Explorer, pour peu que l'on soit en mode de rendu standard.

Une solution simple consisterait à utiliser une image de contenu (élément img) de couleur unie que l'on étirera autant que nécessaire.

Salut et merci pour ta réponse, ta solution semble intéressante, mais je voudrais pouvoir changer facilement les couleurs de ma barre, alors avec une image c'est pas pratique... Si vraiment il n'y a pas d'autre solution je ferai comme ça mais ça serait mieux avec des background-color...
Modifié par ToutPourLeTrash (20 Sep 2006 - 17:46)

Re,

bon finalement j'ai réussi à obtenir le résultat recherché avec des float:left sur tous elements inline, et une marge à gauche pour donner un effet centré au tout. c'est un peu du bidouillage, mais ça marche partout au moins...