11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit soucis sur un outil mootools sur Firefox sur mon site http://www.akylon.com/domes. Sur Firefox, le bloc s'agrandit de quelques pixels, c'est très léger mais j'aimerais bien comprendre pourquoi il y a ce décalage.
Je ne sais pas si je suis très claire.
Je n'ai rien modifié aux codes d'origine, c'est juste le fait d'avoir un contenu plus important qui effectue l'agrandissement.

Je vous donne quand même le code CSS :

.html, body, div, span, img, form, a, table, tr, td, p, ul, li, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

body {
	margin-top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	text-align: center;
}

h2 {
	color: #6A90D9;
	font-size: 1.2em;
	font-weight: normal;
}

#header {
height: 120px;
	padding-top: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
}
.test {
	display: inline;
}
ul {
	margin-left: 100px;
	margin-top: 5px;
	margin-bottom: 5px;
	display: inline;
}

a.menu {
	background-color: #FFFFFF;
	padding: 0px;	
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 5px;
	display: inline;
	color: #498FDD;
	font-size: 12px;
	text-decoration: none;
	letter-spacing: 2pt;
}

a {
	display: block;
	color: #000;
	background-color: #b6b5b5;
	text-decoration: none;
	font-size: 1em;
	margin-top: 0px;
	padding: 5px 5px 5px 10px;
}

a.pop {
text-decoration: none;	
	color: #000;
	text-decoration: none;
	font-size: 12px;
	}

a:link.pop {
text-decoration: none;	
	color: #000;
	text-decoration: none;
	font-size: 12px;
	}
p {
	text-align: justify;
}

#wrapper {
	width: 1000px;
	background-color: #FFFFFF;
	text-align: left;
	margin: 0 auto;
	border: solid 1px #dfdfdf;
}

.information {
	background: #fff;
	margin-top: 10px;
	margin-left: 10px;
}

.separation {
	clear: both;
	visibility: hidden;
}


Merci de votre aide.

Vinix
Modifié par Vinix (02 Sep 2008 - 14:37)
Si j'ai bien compris, ce qui te gène c'est en fait le repositionnement de ton bloque central lorsque tu ouvres l'accordéon (cette action rend la page plus longue et fait apparaitre l'ascenseur vertical).

Le comportement de Firefox est normal et logique : ton bloque est centré horizontalement dans la page, donc si celle-ci diminue en largeur (suite à apparition de l'ascenseur vertical) le bloque est alors repositionné vers son nouveau centre.
Opéra a d'ailleurs le même comportement.

Pour éviter cette variation de largeur, tu peux reproduire le fonctionnement de IE, qui pour ce cas, affiche l'ascenseur même s'il n'est pas nécessaire. Pour cela ajoute simplement la règle CSS :
body {overflow-y:scroll;}
Merci beaucoup.
C'était bien ça le problème et en rajoutant ce bout de code, je n'ai plus le décalage du tout.
Je n'avais pas pensé à tout ça.