28172 sujets

CSS et mise en forme, CSS3

(re) bonjour,

J'ai un (autre) souci sur un site internet.
j'ai créer un diaporama utilisant des fonctionnalités jquery. Des liens ont été créée afin de contrôler le diaporama : précédent, suivant, stop, play.
Mon objectif était de placer des liens images à la place de liens texte. Afin d'avoir l'effet d'un rollover, j'ai donc décider de placer les images dans un background-image. Je m'explique :

Voici la structure html de mes liens :

<div id="controls">
  <span>
      <a class="prev" href="#"> </a>
  </span>
  <span>
      <a class="next" href="#"> </a>
  </span>
  <span>
      <a class="pause" href="#"> </a>
  </span>
  <span>
      <a class="play" href="#"> </a>
  </span>
</div>


mon css définit les images en background pour les différentes classes :

a.prev{
	height:25px;
	width:55px;
	padding:5px 53px 5px 0;
	margin-right:2px;
	background-image:url("../img/prev.png");
	background-repeat:no-repeat;
}
a:hover.prev{
    background-image:url("../img/prev_hover.png");
}
a.next{
  height:25px;
  width:55px;
	padding:5px 53px 5px 0;
	margin-right:2px;
  background-image:url("../img/next.png");
}
a:hover.next{
  background-image:url("../img/next_hover.png");
}
a.play{
  height:25px;
  width:55px;
	padding:5px 53px 5px 0;
	margin-right:2px;
  background-image:url("../img/play.png");
}
a:hover.play{
  background-image:url("../img/play_hover.png");
}
a.pause{
  height:25px;
  width:55px;
	padding:5px 53px 5px 0;
	margin-right:2px;
  background-image:url("../img/pause.png");
}
a:hover.pause{
  background-image:url("../img/pause_hover.png");
}



Le problème est le suivant : les icônes s'affichent correctement et permettent de contrôler le diaporama. Par contre, safari est le seul navigateur à ne pas m'afficher les icônes! est-ce un problème de padding ? ou autre chose ?

Merci