[résolu, mal compris] Décalage sous Safari et Chrome > Hack css

Bonjour à tous,

J'ai un soucis de positionnement ce certaines de mes boites sous Chromes et Safari. Je construit mon projet avec Mozilla. Voici un lien :

mon projet

Sous Chromes et Safari le menu est bien plus bas que sous Mozilla et IE, aussi mon diaporama sur le premier onglet n'est pas à la place voulue...

Ces deux éléments sont (volontairement) sortis du flux. J'ai été étonné en écrivant le code, de leurs positions par rapport à leurs référents. Le problème doit venir de là mais je ne comprends pas.

Est ce que l'un d'entre vous saurait m'éclairer ?
Modifié par Benkusz (13 Dec 2011 - 15:07)

Voici la structure de mon site :
Outre le header et le footer (qui sont hors de toute boite et en position fixed), une boite "container" contient mon site :

#container {
	width: 960px;
	margin: 0 auto;
	padding-top: 0px;
	position: relative;
	top: -200px
}

J'ai descendu ce "container" de la hauteur de mon header (top : -200px).
On trouve ensuite dans cette boite le menu :

#menu{
	position: fixed;	
	width:200px;	
	text-align:right;
	display:block;
	/*float: left;*/
	margin-top: 240px;
	margin-left: -40px;
	z-index: 2;
}

Étant sortit du flux par sa position fixed je l'ai descendu de 200px (hauteur header) + 40 px pour le décoller.
Les 7 onglets du menu font appel à 7 boites ancrées toujours contenues dans "container" voici leurs CSS :

#img1, #img2, #img3, #img4, #img5, #img6, #img7 {
	height: 900px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 00px;
	position:relative;
	background-color: #fff;
}

Chacune de ces boites (img1, img2 etc.) contient une <div class"MiniContenaire"> dont voici le code :

.MiniContenaire {
font-size: 12pt;
height: 500px;
width: 800px;
background : url(../img/bg_MiniContenaire.png);
color: #000;
left: 160px;
margin-top: 240px;
padding : 5px;
position:absolute;
z-index: 0;
border: 1px solid;
}

Il semblerait que mes soucis viennent des positions...
Si je supprime la première boite ("container") lorsque je clique sur un onglet l'ancre est partiellement cachée par le Header...
Si je créer une boite à hauteur fixe de 200px pour compenser, à l'ouverture de la page mon premier MiniContenaire" est loin sous le menu...
Je ne sais pas comment faire
Modifié par Benkusz (13 Dec 2011 - 15:09)

Ok en ajoutant un hack dans mon CSS je règle le problème du menu...

#menu{
	position: fixed;
	width:200px;	
	text-align:right;
	display:block;
	/*float: left;*/
	margin-top: 240px;
	margin-left: -40px;
	z-index: 2;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #menu {
	position: fixed;
	width:200px;	
	text-align:right;
	display:block;
	/*float: left;*/
	margin-top: 40px;
	margin-left: -40px;
	z-index: 2;
  }
}

Si quelqu'un sait m'expliquer mon problème de diaporama, ce serait super !
Modifié par Benkusz (13 Dec 2011 - 14:44)

Ok en faisant la même opération avec ma galerie ça marche, mais j'ai tâtonné et je ne suis pas sûr de bien comprendre pourquoi ça ne fonctionnait pas.

#IMGaleas{
	position:relative;
	bottom:55px;
	right:245px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #IMGaleas {
	position:absolute;
	bottom:325px;
	right:-50px;
  }
}