Décalage sous firefox

bonjour,

j'ai parcouru différents topics traitant de ce problème
mais je n'ai pas trouvé de solutions qui aient fonctionné

il y a un décalage de presque 2px pour le cadre "news" et
du slider "avantages" sous firefox

J'ai lu quelque part que cela pouvait venir des pixels impairs et pairs
serait ce possible ?

j'avoue ne plus comprendre d'où vient véritablement le pb

je ne serai pas contre un oeil expert ^^


la page en question


SLIDER :

	<div class="news">
				<h1>News / offres speciales</h1>
				<div class="slide">

		<div id="slider">
			<ul>				
				<li><img src="images/01.jpg" alt="image description"/></li>
				<li><img src="images/02.jpg" alt="image description"/></li>
				<li><img src="images/03.jpg" alt="image description"/></li>
				<li><img src="images/04.jpg" alt="image description"/></li>			
			</ul>
		</div>





				</div>
				</div>

#home
 {
 position:relative;
 display:inline-block;
 width:781px;
 height:731px;
 background-image:url(images/home.jpg);
 
 }
 
 #home .news
 {
 position:relative;
top:-25px;
 margin-right:30px;
 float:right;
 opacity:0.5;
  -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity:0.5;
 }
  #home .news:hover
 {
 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;

 opacity:1;
 }
 #home .news h1 {
 font-family:'KeffeesatzBold';
 position:relative;
 font-size:30px;
 color:#9a8d5e;
 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
text-align:center;
top:-20px;

 }
 
 #home .news .slide
 {position:relative;
 display:inline-block;
 width:267px;
left:7px;
top:-14px;
 height:137px;
bottom:10px;
 text-align:center;
  -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

 }
 #home .news .slide:hover
 { -moz-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:1000;
-webkit-box-shadow: 0px 0px 10px #333333;
-moz-box-shadow: 0px 0px 10px #333333;
box-shadow: 0px 0px 10px #333333;


 }

AVANTAGES:

		<article id="avantage">
		<h1>Venez découvrir nos + !</h1>
		<div id="accordeon">
		<div id="slidedeck_frame" class="skin-slidedeck">
		
			<dl class="slidedeck">
				<dt><h2>éco-conduite</h2></dt>
				<dd><p>L'éco-conduite est un style de conduite dont le but est de limiter les émissions de CO2 et la consommation de carburant.</br><a href="http://fr.wikipedia.org/wiki/%C3%89coconduite" target="_blank">en savoir +</a> </p></dd>
				<dt><h2>code en ligne</h2></dt>
				<dd><p>Réviser et travailler son code
de chez soi.</br>série de code en illimité</p></dd>
				<dt><h2>suivi personnalisé</h2></dt>
				<dd><p>Tout au long de la formation, il nous importe d'accompagner au mieux l'élève vers la réussite.</p></dd>
				<dt><h2>conduite supervisée</h2></dt>
				<dd><p>La conduite supervisée s'adresse à des personnes ayant 18 ans mais qui pour différentes
				raisons choississent une conduite accompagnée. </br> <a href="http://www.permisdeconduire.gouv.fr/les-permis/le-permis-b/se-former-a-la-conduite/la-conduite-supervisee/" target="_blank">en savoir +</a></p></dd>
				<dt><h2>facilité de paiement</h2></dt>
				<dd><p>conscient que le permis de conduire puisse être un coût important, nous vous proposons
				des facilités de paiement.</br> <a href="">pour plus d'informations prenez contact avec nous</a></p></dd>
			</dl>
			
		</div></div></article>

CSS:

#avantage
{margin-left:337px;
margin-top:30px;

}

#avantage h1 {
opacity:0.5;
 font-family:'KeffeesatzBold';
 font-size:30px;
 color:#9a8d5e;
 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
text-align:center;
}

#avantage h1:hover {
opacity:1;

}

#avantage h2 {

 font-family:'KeffeesatzBold';
 font-size:23px;
 color:#f6e4a4;
 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;

}

#avantage p {

 font-family:Keffeesatz;
text-align:left;
word-spacing:normal;
font-size:20px;
font-weight:normal;
color:#797050;
}

#avantage p a {

 font-family:Keffeesatz;
text-align:justify;
word-spacing:normal;
font-size:15px;
font-weight:normal;
color:orange;
}
#avantage #accordeon
{
position:relative;
opacity:0.7;
margin-top:16px;
padding-top:4px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#avantage #accordeon:hover
{
opacity:1;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

h.s: d'ailleurs, j'ai quelques doutes sur la forme/design du site
si certains pouvaient me donner leur avis, j'apprécierai grandement la chose


merci d'avance à tous
Modifié par waik (28 Jun 2011 - 11:32)

salut,

vite fait ...
si tu parles du tout petit décalage concernant les images dans le slider (coming soon de couleurs différentes) je te suggère de chercher du côté des règles CSS. j'avoue ne pas avoir regardé dans le détail, mais ton souci se situe certainement à ce niveau. (à l'arrache essaies un 'global white spacing reset' pour voir)

sinon concernant les 2 sliders, même si c'est assez rare, penses aux éventuels cas où javascript serait désactivé.

sinon les gouts et les couleurs, ... moi je partirai sur une interface bcp plus 'simple'.
il faut penser à la cible et la vocation du site. il faut que les visiteurs trouvent l'info facilement et rapidement.

bonne continuation

A+