18015 sujets

Questions générales et questions de débutants

Problème icone sous IE

Bonjour tout le monde, je sollicite votre précieuse aide,Je suis en train de construire mon portfolio, tout à l'air d'aller pour le moment sur chrome et firefox, mais IE (tiens donc) n'affiche pas correctement les icones au dessus de mon menu en "a hover", chez moi elle sont décalées vers la gauche, je ne comprend pas pourquoi...
A savoir que j'ai utilisé des SPAN et remplacé le texte par des images.

quelqu'un aurai un tip, fix, correction.. à me fournir ?

ps : j'ai volontairement supprimé des lignes de code sans rapport je pense avec ma problématique, afin de vous épargner une recherche fastidieuse à l'intérieur de ce dernier.

Mon code : 

<!DOCTYPE html>
[...]
     <nav>
       <ul>
         <li>
          <a href="#">accueil <center><span><img src="ImageS/accueil.png"  /></span></center></a>
         </li>
         <li>
          <a href="#">travaux <center><span><img src="ImageS/travaux.png"  /></span></center></a>
         </li>
         <li>
          <a href="#">cursus <center><span><img src="ImageS/cv.png"  /></span></center></a>
         </li>
       </ul>
     </nav>
[...]
</html>



[...]

  
/* Header */  
    
header {
  position: relative;
  margin: auto;
  background-color: #252525; /* Couleur de fond header */
  width: 80%;
  height: 705px;
  border: 0px;
}  
 
div#logo {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 109px;
  margin-left: 215px;
  margin-top: 50px;
  background-image: url(ImageS/logo.png);
  background-repeat : no-repeat;
}
 
nav {
  display: inline-block;
  position: relative;
  width: 50%;
  word-spacing: 32px;
  letter-spacing: 1px;
  top: -45px;
  left: 50%;
  font-family: 'helvetica-webfont', verdana;
  font-size: 19px;
  text-align: center;
  text-transform: uppercase;
}
 
nav ul
{
  
}
  
nav li
{
  display: inline-block;
}
  
nav a
{
  padding: 3px;
  color:#ffffff;
  text-decoration:none;
  font-weight:regular;
}
  
nav a:hover
{  
  color:#c0370d;
  text-decoration:none;
  font-weight:regular;
}
 
a span{
     position:absolute;  
     margin-top:-69px;
     margin-left:-21px;
     transition:all .25s;  
     opacity:0;
     color:#09c;
     transform:scale(0) rotate(-12deg);
     background:#c0370d;
     padding:5px;
     border-radius:3px;
 
}
 
 
a:hover span, a:focus span{
   
     opacity:1;
     transform:scale(1) rotate(0);      
}
 
[...]


Je ne sais pas si quelqu'un à une solution, mais elle serait la bienvenue !

Merci par avance
Modifié par sikarak (27 Jun 2013 - 02:57)
Sujet clos
Aller à