28173 sujets

CSS et mise en forme, CSS3

[RÉSOLU] Centrage vertical foireux sous FF mais pas sous IE !

Salut !

J'ai un souci avec mon site que je viens de coder cette après-midi.
En fait avec Internet Explorer tout va bien mais sous Firefox ça foire complètement (allez voir le site pour voir de quoi il s'agit) ...

En fait j'ai aligné la DIV #page sur la verticale mais le truc c'est que les autres DIV's se trouvant à l'intérieur de celles-ci sont décalées vers le bas de 85px et je ne sais absolument pas d'où ça vient !

Voici un bout de ma page et de ma feuille de style ...


<body>
	<div id="page">
		<div id="elements_page">
			<div id="header"></div>
			<div id="fond_contenu"></div>
			<div id="footer></div>
		</div>
	</div>
</body>




body
{
	margin: 0;
	padding: 0;
	height: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: justify;
	background-image: url(images/background.jpg);
	background-color: #1A2127;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	color: #FFFFFF;
}

#page
{
	position: absolute;
	top: 50%;
	width: 100%;
	height: 550px;
	margin: -275px /* <= moitié de la hauteur */ 0;
	padding: 0;
	/* border: 1px solid #000; */
	background-color: #1f9dc1;
	background-image: url(images/fond_page.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

#elements_page
{
	width: 750px;
	height: 550px;
	margin: auto;
	padding: 0;
}

#header
{
	height: 100px;
	margin-bottom: 30px;
	padding: 0;
	background-image: url(images/fond_header.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}

#fond_contenu
{
	height: 360px;
	width: 690px;
	margin: 0 auto;
	padding: 0;
	background-image: url(images/fond_contenu.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}

#footer
{
	height: 22px; /* soustraire le padding */
	width: 750px;
	margin-top: 30px;
	padding-top: 7px;
	background-image: url(images/fond_footer.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	color: #666666;
	font-size: 10px;
	text-align: center;
}


Un géant merci à tous ceux qui m'aideront ! Smiley lol
Modifié par N-21 (02 Nov 2007 - 20:56)
Salut,
Proposition débile :
Mettre un paddin de -85px pour que le site soit ok sous FF et chercher la source du pb sous IE.
Salut,

Ben oui on trainasse ... on est pas au pièce Smiley cligne
Bon, à priori un problème de fusion des marges sur ton header, pour l'éliminer soit un border-top sur ton header ou un overflow: auto et normalement ça devrait le faire Smiley lol
Un grand merci ghost, t'es génial ! Smiley ravi
Je viens de rentrer et tester ça, ça roule à merveille !
Désolé d'avoir un peu UPé hier soir mais aujourd'hui j'étais parti et vu que le site est déjà online ...

Et Yorick, je n'aime pas trop arranger un problème pour devoir en régler un autre ! Smiley lol
Mais merci pour ton idée ! Smiley cligne

@+ les gars ! Smiley biggthumpup
Sujet clos
Aller à