[résolu] Problème sous firefox et IE8 pour répéter une image

Problème sous firefox et IE8 pour répéter une image [résolu] - HTML/CSS - Programmation

Marsh Posté le 12-05-2010 à 18:00:30    

Bonjour,
 
j'ai un problème d'affichage sous IE8 et firefox (sous IE6 pas de souci) : j'essaye d'afficher une barre (découpée en 3 morceaux) sur la largeur de la page. Or l'image ne s'affiche ne se répète qu'une seule fois alors que l'on a bien la propriété  repeat-x . Quelqu'un verrait-il où est le souci avec IE8 et FF ?
 
 
Contenu jsp :
 
[...]
 
                                       <div class="row left colonne100">
                                        &nbsp;
                <span class="colonne10 barreJauge">
                                          &nbsp;
                                         </span>
                                         <span id="jauge_plein_synthese" onclick="javascript:changerEtatOnglet('perspectives', 'synthese');" style="cursor:pointer;">
                                          <html:img styleClass="collapse1" srcKey="icone.jauge_plein" styleId="jauge_plein" alt="" />
                                         </span>
                                         <span id="jauge_vide_synthese" onclick="javascript:changerEtatOnglet('perspectives', 'synthese');" style="cursor:pointer;display:none;">
                                          <html:img styleClass="collapse2" srcKey="icone.jauge_vide" styleId="jauge_plein" alt="" />
                                         </span>
                                         <span class="colonne25 barreJauge">
                                          &nbsp;
                                         </span>
                                         <span id="jauge_vide_perspectives" >
                                          <html:img styleClass="collapse3" srcKey="icone.jauge_vide" onclick="clicPerspective()" styleId="jauge_vide" alt=""  />
                                         </span>
                                         <span id="jauge_plein_perspectives"  style="display:none;">
                                          <html:img styleClass="collapse4" srcKey="icone.jauge_plein" styleId="jauge_vide" alt=""  />
                                         </span>
                                         <span class="colonne55 barreJauge" >
                                          &nbsp;
                                         </span>
                                        </div>
 
[...]
 
Contenu css :
 
[...]
 
.row {
    clear: both;
}
.left {
    float: left;
}
.colonne100 {
    width: 100%;  
}
.colonne55 {
    width: 55%;
}
.colonne25 {
    width: 25%;
}
.colonne10 {
    width: 10%;  
}
.barreJauge{
 background: url(../images/barre_bleu.gif) repeat-x 0px 0px;
 margin-bottom: 10px;
 margin-left: -3px;
}
 
[...]


Message édité par ib@w le 17-05-2010 à 16:57:57
Reply

Marsh Posté le 12-05-2010 à 18:00:30   

Reply

Marsh Posté le 14-05-2010 à 10:44:46    

Est-ce que la longueur permet une répetition ?
 
Pour le savoir, vous pourriez ajouter au style de barreJauge :

border:1px solid black;


 
Edit : Dans mes exemples, je vois toujours le nom d'une couleur ou le mot transparent avant url() Peut-être que cette absence de propriété de couleur perturberait les navigateurs.
Exemple : background:#f0eee0 url(/img/bg1.png) repeat-x top right;
Voir doc officiel à http://www.w3.org/TR/CSS2/colors.html#background


Message édité par olivthill le 14-05-2010 à 11:12:35
Reply

Marsh Posté le 17-05-2010 à 16:57:37    

Dans le style barreJauge, j'ai rajouté "display: inline-block;" et ça fonctionne ! A priori, span ne tient pas compte de width sans cela (sous FF et IE8).

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed