28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Décalage page quand affichage footer sur FF pas sur IE

Bonjour,

Sur une mise en page 3 colonnes en CSS...

Mon soucis est sur FF2 et pas sur IE6 :
- ma page est décalée horizontalement dans l'écran de quelques pixels lorsque le pied de page n'ai pas affiché du fait d'un contenu très long.

Mais on peut dire l'inverse aussi :
- ma page est décalée horizontalement dans l'écran de quelques pixels lorsque le pied de page est affiché du fait d'un contenu très court.

Comment supprimer ce décalage ?

La structure de mon modèle de page est la suivante :
<body>
<div ID="global">
	<div ID="page">
		<div ID="leftnav"></div>
		<div ID="rightnav"></div>
		<div ID="contenu"></div>
	</div>
	<div ID="pied"></div>
</div>
</body>


Le CCS est le suivant :
html, body {
	height: 100%;
	margin: 0;
	background: #CCCCCC;
	font-size: 1em;
	color: #333; }
#global {
	min-height: 100%;
	position: relative;
	margin: 0 auto;
	background: #FFF;
	width: 760px; }
#page { 
	padding-bottom: 50px; 
	background: #FFF; 
	overflow: auto;}	
#leftnav { 
	width: 150px ; 
	float: left ; 
	margin: 0; 
	padding-top: 10px;}
#contenu { 
	margin-left: 160px;
	margin-right: 160px; 
	border-left: 1px solid #CCC; 
	padding: 10px; }
#rightnav { 
	width: 150px ; 
	float: right ; 
	margin: 0; 
	padding-top: 10px;}
#pied { 
	position: absolute; 
	bottom: 0px; 
	width:100%; 
	background-color: #CC0000; 
	text-align: center;}


Bien entendu le CSS est adapté pour IE6 :
#global {height: 100%;}
#page {overflow: visible; height: 1%;}
body { position: relative;}


J'avoue que je bute sur le pourquoi de ce décalage sous FF2... Smiley biggol
Une idée pour éclairer ma lanterne ?

Merci par avance Smiley smile
Modifié par tg_worldwide (22 Nov 2006 - 18:26)
tg_worldwide a écrit :
ma page est décalée horizontalement dans l'écran de quelques pixels lorsque le pied de page n'ai pas affiché du fait d'un contenu très long.


Heu... tu m'excuses si je rigole un coup ? Smiley rofl Smiley err

Je comprends qu'on puisse trouver ce décalage gênant et chercher à y remédier (même si ce n'est finalement qu'un détail bien peu important), mais ne pas voir la source du problème, c'est très fort. Smiley cligne

Quand ta page est longue, une barre de défilement se rajoute, et c'est autant d'espace en moins de disponible... d'où le décalage. Contrairement à Internet Explorer, et à l'instar de Safari, Opera et Konqueror, Firefox n'affiche pas de barre de défilement grisée en permanence.

Il y a un moyen pas hyper standard mais pas trop problématique pour obtenir le même comportement de « barre grisée » dans Firefox 1.5+. Cf. cette page :
http://web.covertprestige.info/test/09-barre-defilement-et-decalage-page-centree-1.html

Attention : cela supprime l'effet de décalage (dans Firefox 1.5+, pas dans Opera, Safari, Konqueror, Firefox 1, etc.), mais par contre ça rajoute une barre qui normalement ne devrait pas être là. Cette barre est grisée, mais cela ne suffira peut-être pas pour éviter de perturber les habitudes de l'utilisateur.
À toi de voir l'intérêt que ça représente pour ton site.


PS : désolé d'avoir ri, c'est pas que je me moque, mais une description si minutieuse pour dénicher un problème si « évident »... ça a été ma première réaction. Smiley smile
Tu as raison de rire et je dirais même plus TU AS RAISON DE RIRE

A force d'être trop dans le code on oubli de prendre de la distance... Résulat : on passe pour un myope de première Smiley lol et je parle pas du reste.

Toujours est-il que je te remercie vivement pour ne pas en être resté qu'au rire et de m'avoir fourni ce lien.

Promis juré je ne recommencerais plus !
N'empêche que je me marre de ma bêtise aussi.

A bon entendeur !
Sujet clos
Aller à