28172 sujets

CSS et mise en forme, CSS3

Sprites css sur balise a vide pb avec ie[Résolu]

Bonjour,

je veux faire des boutons sprites pour mon carousel.
le pb c'est avec IE j'ai pas d'affichage.

voici juste la partie des boutons sprite :
Html:

  
<div class="jcarousel-control">
      <a id="btn1" href="#">1</a>
      <a id="btn2" href="#">2</a>
      <a id="btn3" href="#">3</a>
      <a id="btn4" href="#">4</a>
    </div>


Ici j'ai rempli les balises <a> pour que l'on puisse voir les liens sur ie.

CSS:

.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;

}

.jcarousel-control a{
    font-size: 75%;
    text-decoration: none;
    background: url(img_deco/btn_slide.png)no-repeat scroll 0 -9px transparent;
    height:8px;
	width:8px;
	cursor:pointer;
	display:block;
	float:left;
	margin-right:7px;
}

.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
	
}

a#btn1:hover, a#btn1.active{
	background-position: 0px 0px;
	}
a#btn2:hover, a#btn2.active{
	background-position: 0px 0px;
	}	
a#btn3:hover, a#btn3.active{
	background-position: 0px 0px;
	}
a#btn4:hover, a#btn4.active{
	background-position: 0px 0px;
	}

Je sais aussi que je peux faire une classe pour l'effet rollover au lieu de repeter 4 fois le meme background-position.

Comment je dois faire pour avoir un affichage sur IE de mes sprites aux balises <a> vide?
Modifié par yellooo (20 Jul 2011 - 12:41)
Ok merci j'ai trouvé.
L'erreur vient de mon Sprites CSS:

Fonctionne pas avec IE: Smiley decu 

.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    background: url(img_deco/btn_slide.png)no-repeat 0px -9px ;
    height:8px;
	width:8px;
	cursor:pointer;
	display:block;
	float:left;
	margin-right:7px;
}


Fonctionne avec IE: Smiley confused 

.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    background: url(img_deco/btn_slide.png) 0px -9px ;
    height:8px;
	width:8px;
	cursor:pointer;
	display:block;
	float:left;
	margin-right:7px;
}


Il faut enlever le no-repeat du background.
Si cela peux aider quelqu'un sur les balises vide.
PetarouxRay a écrit :
no-repeat est connu de ie, c'est plutot un espace qu'il faut rajouter non ? Smiley smile

Pas besoin d'espace. On retire le no-repeat et c'est bon. Smiley smile
yellooo a écrit :
Pas besoin d'espace. On retire le no-repeat et c'est bon. Smiley smile


C'est plus logique d'ajouter no-repeat et de pas faire d'erreur de syntaxe comme l'a suggéré PetarouxRay.
jb_gfx a écrit :


C'est plus logique d'ajouter no-repeat et de pas faire d'erreur de syntaxe comme l'a suggéré PetarouxRay.


Oui exact mais cela ne fonctionne pas avec IE. Le fait de mettre un espace et le no-repeat passe bien sous FF mais pas sous IE. Et supprimant le no-repeat l'espace devient inutile. Et fonctionne sur IE et FF.

Pour l'instant cette solution me va car je le gère avec les sprites.

Autre soluce, en utilisant un hack IE. Et comme ca tu peux garder le no-repeat.

J'ai vu un site où il y a bien un no-repeat sous IE. Je vais chercher et je posterais la solution propre, en attendant il y a cette méthode.
yellooo a écrit :


Oui exact mais cela ne fonctionne pas avec IE. Le fait de mettre un espace et le no-repeat passe bien sous FF mais pas sous IE. Et supprimant le no-repeat l'espace devient inutile. Et fonctionne sur IE et FF.

Pour l'instant cette solution me va car je le gère avec les sprites.

Autre soluce, en utilisant un hack IE. Et comme ca tu peux garder le no-repeat.

J'ai vu un site où il y a bien un no-repeat sous IE. Je vais chercher et je posterais la solution propre, en attendant il y a cette méthode.


Re-moi je viens de trouver la soluce avec le no-repeat.
Le pb venait de la librairie Jcarousel en passant par la librairie scrollable on a effectivement un no-repeat compatible avec ie.
Merci de votre aide.
je n'ai pas testé mais j'ai eu un problème similaire il y a quelques temps.

background: url(img_deco/btn_slide.png)no-repeat 0px -9px ;


il faut mettre un espace entre ")" et "no-repeat". comme ceci :

background: url(img_deco/btn_slide.png) no-repeat 0px -9px ;


ça devrait marcher sous IE
Modifié par spout (25 Jul 2011 - 18:25)
Sujet clos
Aller à