Mozilla ne reconnais pas background-position

Question

webdebutant

5 Aug 2014 à 00:49

Bonjour,
j'ai un problème avec l'affichage de mes données sur mozilla, le hover s'affiche correctement sur chrome mais sur mozilla il y a un lèger décalage.
Je vous laisse le code.


<body>
    <div id="home">
    	<nav id="menu">
   	       <ul class="menu">
            	<li><a id="lienaccueil" href="#home">ACCUEIL</a></li>
                <li><a id="lienprojets" href="#projets">PROJETS</a></li>
                <li><a id="lienprofil" href="#profil">PROFIL</a></li>
                <li><a id="liencontact" href="#contact">CONTACT</a></li>
          </ul>
       </nav>
         
          <nav id="reseauxsociaux">
       	<ul class="float">
        	<li><a href="https://www.facebook.com/profile.php?id=100008390103814"  target="_blank" class="sprite fb">Facebook</a></li>
            <li><a href="https://www.linkedin.com/profile/view?id=343299035&trk=nav_responsive_tab_profile" target="_blank"  class="sprite linkedin">linkedin</a></li>
            <li><a href="http://www.pinterest.com/vanegr24/"  target="_blank"  class="sprite pin">Pinterest</a></li>
        </ul>
       </nav>    
                   
        <nav id="portrait">
         	<img src="images/portrait et badge_r2_c2.gif" alt="portrait"/>    
        </nav>
       
       <div id="infos">
       <h1 id="hello">Hello !</h1>
       <h3 id="Vaness">Vanessa Groussin:Graphiste Webdesigner</h3>
       <p id="paragraphe">Creative,Curieuse</p>
       </div>
       
      <nav id="fleche">
       	<img src="images/fleche-descendre.gif" alt="fleche qui descend"/>
      </nav>
              
    </div>
    
	<div id="projets">
    	
        <div id="boiteprojets">
        	<h1 id="titreprojets">PROJETS</h1>
        	<h3 id="infostitre">Web/Print/Responsive/Appli/UX-UI</h3>
        </div>
       
       <div id="imagesprojets">
            <div id="projet1">
               <a href="#"></a>
            </div>
            
            <div id="projet2">
               <a href="file:///Macintosh HD/Users/vanessa/Documents/Book_2_HTML/projet1/projet1(lfsenm).html"></a>
            </div>
            
            <div id="projet3">
               <a href="#"></a>
            </div>
            
             <div id="projet4">
                <a href="#"></a>
            </div>
            
             <div id="projet5">
                <a href="#"></a>
            </div>
            
             <div id="projet6">
                <a href="#"></a>
            </div>
            
            <div id="projet7">
               <a href="#"></a>
            </div>
            
            <div id="projet8">
               <a href="#"></a>
            </div>
 
       </div>
       
        <div class="clear"></div>
        
        <nav id="flecheprojets">
       		<img src="images/fleche-descendre.gif"/>
        </nav>
    
    </div>
    
    <div id="profil">
    	<h1 id="titreprofil">PROFIL</h1>
        
      <div id="fondtransparent">
        <div id="texte">
            <p>Hello!</p><br />
            <p>Je suis Vanessa Groussin, graphiste-Webdesigner.</p><br />
            <p>Créative, ma specialité est l'identité visuelle.Je suis travailleuse et motivée.</p><br />
            <p>Curieuse, je suis les tendances du graphisme, de la mode et du web.</p>
        </div>
      </div>
    
       <div id="cv">
       		<img src="images/cv_03.png"/>
       </div>    
               
       <nav id="flecheprofil">
       	<img src="images/fleche-descendre.gif" />
       </nav>
    
    </div>
    
    <div id="contact">
    		
            <h1 id="titrecontact">CONTACT</h1>
            
         <div id="formulaire">
            <form name="formulaire" method="post" action="php/insert.php">
            	<label for="nom"></label><br />
                <input name="nom" type="text" id="idnom" maxlength="60" placeholder="nom" tabindex="1" />
                <br />
                <label for="mail"></label><br />
                <input name="mail" type="text" id="idmail" maxlength="60" placeholder="mail" tabindex="2" />
                <br />
                <label for="message"></label><br />
                <textarea name="message" cols="40" rows="10" id="idmessage" placeholder="Votre message" tabindex="3"></textarea>
                <br />
                
                <input name="envoi" type="submit" id="envoi" value=""/>
            
            </form>
         </div>
            <div id="enveloppe">          
              <img id="iconeenveloppe" src="images/enveloppe_07.png"/>
              <p id="mail"><a id="lienmail" href="#">contact@vanessagroussin.com</a></p>            
            </div>
            
           
      <p id="copyrigth">copyrigth © Vanessa Groussin<a id="mentionslegales" href="#">-Mentions Legales</a></p>
            
</div>
    
    </div>
    
<script src="jquery/jqueryv1-11-1.js" type="text/javascript"></script>
<script type="text/javascript">
	      $(document).ready(function(){
	
		$(".menu a").click(function(){
			$("html,body").animate({scrollTop: $(this.hash).offset().top},800);
		    });
			
  });//fin du doc ready
  </script>
    
</body>
</html>


html,body {
	height: 100%;
	width: 100%;
}
#home {
	background: url(images/fond-home.png) repeat;
	height: 100%;
	position: relative;
}

#projets {
	background: #f9c16f;
}


#profil {
	background: url(images/fond-profil.gif) repeat;
	height: 100%;
}

#menu {
	width: 100%;
	background: url(images/rubban-menu.gif) no-repeat;
	-moz-background-size: 100% 100%;
	height: 9%;
	margin-left: 31%;
	float: left;
	margin-top: 0,5%;
	margin-right: 3%;
	position: fixed;
	opacity: 0.5;
	transition: all .5s;
}

#menu:hover {
	opacity: 1;
}
.menu{
	width: 100%;
	max-height:49px;
	max-width: 643px;/*width:723px;*/
	padding-left: 80px;
	padding-top: 10px;
	}


.menu li {
	font-family: 'Titillium Web', sans-serif;
	display: inline;
	font: 400;
	padding-right: 50px;

}



#reseauxsociaux {
	position:absolute; 
	top:30px;
	right:30px;
	width: 200px;
	/*margin-right: 30px;
	margin-top: 30px;*/
}

.sprite{ background:url(images/reseaux-sociaux.gif) transparent 0 0 no-repeat; display: inline; float: right; height: 35px; margin-right: 10px; text-indent: -2113132px; width: 35px;}

.fb{ background-position: 0 0;}
.fb:hover{ background-position: 0 -50px;}
.linkedin{ background-position: -49px 0;}
.linkedin:hover{ background-position: -49px -50px;}
  
.pin{ background-position: -99px 0;}
.pin:hover{ background-position: -99px -50px;}


#portrait {
	width: 36,61538%;
	padding-top: 5%;
	padding-left: 10%;	
	float: left;
	
}

a{text-decoration:none;}
	
#lienprojets {
	color: #FFF;
	font: 400;
	font-size: 1.750em;
}
#lienaccueil {
	color: #FFF;
	font: 400;
	font-size: 1.750em;
}
#lienprofil {
	color: #FFF;
	font: 400;
	font-size: 1.750em;
}
#liencontact {
	color: #FFF;
	font: 400;
	font-size: 1.750em;
}

#hello{
	font: normal 3.875em okolaks;
	width: 18,38461%;
	}
#Vaness {
	font: 1.875em "Afta sans";

}

#paragraphe {
	font-family: "Afta sans";
	font-size: 1,438em;
	color: #930;
}

#infos {
	width: 51,53846%;
	float:left;
	padding-top: 9%;
	padding-left: 7%;
}


#fleche {
	width: 4,153846%;
	padding-left: 50%;
	padding-top: 4%;
	clear: both;
}
#boiteprojets {
	width: 11,923076%;
	text-align:center;
	padding-top:4%;
}
.clear {
	clear: both;
}


#infostitre {
	font-family:"Afta sans";
	font: 400;
	font-size: 1.750em;
	color:#322518;
}

#titreprojets {
	font-family: 'Titillium Web', sans-serif;
	font: 400;
	font-size: 3.7em;
	color:#FFF;
	
}

#imagesprojets {
	width: 94,38461%;
	padding-bottom: 5%;
	margin-right: auto;
	margin-left: auto;
}
 
                                     
#projet1 {
	width: 28,72340%;
	float: left;
	margin-top:4%;
	margin-left: 5%;
	background: url(images/vignette-pasaes_09.png) no-repeat;
}

#projet1 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;
	background: url(images/hover-pasaes_09.png) no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
}
#projet1 a:hover{
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	
	}
 
 
#projet2{
    width: 28,72340%;
	float:left;
	margin-top: 4%;
	margin-left: 5%;
	background:url(images/vignette_lfsenmelent_03.png) no-repeat;
	}
	
#projet2 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;
	background:url(images/hover-lfsenmelent_03.png) no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	
	
#projet2 a:hover{
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	
	
		
#projet3{
	width: 28,72340%;
	float:left;
	margin-top: 4%;
	margin-left: 5%;
	background:url(images/vignette-nixon_05.png)no-repeat;
	}	

#projet3 a{
	background:url(images/hover-nixon_2.png)no-repeat;
	opacity:0;
	display: block;
	height: 286px;
	width: 370px; 
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	background-position-y:-6px;
	background-position-x:-4px;
	}

#projet3 a:hover{  /** avec cette partie le hover ne marche pas**/
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	



#projet4{
	width: 28,72340%;
	float:left;
	margin-top: 4%;
	margin-left: 5%;
	background:url(images/vignette-parc_floral_03.png) no-repeat;
	}
	
#projet4 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;
	background:url(images/hover-parc_floral_03.png) no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}		

#projet4 a:hover{
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	

	
#projet5{
	width: 28,72340%;
	float:left;
	margin-top: 4%;
	margin-left: 5%;
	background:url(images/vignette-presto.png) no-repeat;
	}	

#projet5 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;
	background:url(images/hover-presto.png)no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}		

#projet5 a:hover{
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	


#projet6{
	width: 28,72340%;
	float:left;
	margin-top: 5%;
	margin-left: 5%;
	background:url(images/projet-camion-gourmand.png) no-repeat;
	}

#projet6 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;
	background:url(images/hover-camion-gourmand.png)no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	background-position-y:-13px;
	background-position-x:-19px;
	}		

#projet6 a:hover{    /**aussi avec cette partie que le hover ne marche pas**/
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	}	



#projet7{
	width: 28,72340%;
	float:left;
	margin-top: 3%;
	margin-left: 5%;
	background:url(images/vignette-projetsavenir_03.png) no-repeat;
	}

#projet7 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;}
	/**
	background:url(images/vignette-projetsavenir_03.png)no-repeat;
	-moz-transition:all 1s ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
	background-position-y:-13px;
	background-position-x:-19px;}**/
				

/**#projet7 a:hover{
	opacity:1;
	-moz-transition:all 1s  ease-in-out;
	-webkit-transition:all 1s  ease-in-out;
	-o-transition:all 1s  ease-in-out;
	-ms-transition:all 1s  ease-in-out;
}**/

#projet8{
	width: 28,72340%;
	float:left;
	margin-top: 3%;
	margin-left: 5%;
	background:url(images/vignette-projetsavenir_03.png)no-repeat;
	}		

#projet8 a {
	opacity:0;
	display: block;
	height: 286px;
	width: 370px;}	
	
#flecheprojets {
	width: 4,153846%;
	padding-left: 50%;
	padding-top: 4%;
	padding-bottom: 3%;
	clear: both;	
}
#titreprofil {
	font-family: 'Titillium Web', sans-serif;
	font: 400;
	font-size: 3.7em;
	color:#37291C;
	text-align:center;
	width: 13,23076%;
	padding-top: 4%;
}

#fondtransparent {
	width: 55%;
	margin: 80px auto 60px;
	padding: 20px 5px 35px 5px;
	opacity:1;
	background: rgba(255,255,255,0.5);
}

#texte {
	width:84,230769%;
	text-align: left;
	font-family: 'Titillium Web', sans-serif;
	font: 400;
	font-size: 2em;
	padding-left: 6%;
}

#cv {
	width:13,15384%;
	float:right;
	padding-right: 25%;
}

#flecheprofil {
	width: 4,153846%;
	padding-left: 50%;
	padding-top: 1%;
	padding-bottom: 4%;
	clear: both;	
}
#titrecontact {
	font-family: 'Titillium Web', sans-serif;
	font: 400;
	font-size: 3.7em;
	color:#FFF;
	text-align:center;
	width: 13,23076%;
	padding-top: 4%;
}
#enveloppe {
	width:20%;
	float:right;
	padding-right:27%;
	margin-top: 15%;	
}
#iconeenveloppe {
	float: left;
	padding-right: 5%;
}


#contact {
	background: #73bdb3;
	height: 100%;
}
#mail {
	padding-top: 1%;
}

#lienmail {
	font-family: "Afta sans";
	text-decoration: none;
	color:#000;
	
}
#formulaire {
	width: 30%;
	margin: 40px auto 0 250px;
	height:40%;
	float:left;
	padding: 20px;
	margin-top: 10%;
	background: url(images/fond-home.png) repeat;
}

#copyrigth {
	width:30%;
	margin-right:auto;
	margin-left:auto;
	margin-top:35%;
	padding-left:15%;
}
#formulaire form {
	margin-top: 2% auto;
}
#formulaire label {
	font-size: 1.2em;
	font-weight: bold;
}
#formulaire input[type=text] {
	width: 90%;
	height: 35px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 10px;
	padding-left: 12px;
	font-family: 'Titillium Web', sans-serif;
	font-size: 1em;
}
#formulaire textarea {
	width: 89%;
	height: 100px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	margin-bottom:20px;
	padding: 8px;
	font-family: 'Titillium Web', sans-serif;
	font-size: 1em;
}
#formulaire input[type=submit] {
	width: 75px;
	height: 50px;
	background: url(images/envoyer.gif) center no-repeat;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	margin-right:6%;
	float: right;
}
#mentionslegales {
	color: #000;
	text-decoration: none;
}

Je vous remercie de votre aide.
PS:Désolée du pavé.
Modifié par webdebutant (05 Aug 2014 - 00:50)

Sujet clos

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

Mozilla ne reconnais pas background-position