28173 sujets

CSS et mise en forme, CSS3

Soucis de mise en page, image décalée entre Firefox et IE

Bonjour, je suis en train de refaire mon site et j'ai un soucis au niveau d'une image qui est décalée entre Internet Explorer et Firefox.

Style.css
body {
	color: #ffd030 ;
	font: 14px Verdana, "Arial" ;
	background: #000000 ;
}
div#contenu {
	width: 840px;
	margin: 10px auto;
	background: url(image/centre.jpg);
}
div#header {
	width: 840px;
	height: 210px;
	background: url(image/haut.jpg) no-repeat;
}
div#header_d {
	height: 210px;
	background: url(image/haut_d.jpg) no-repeat right;
}
div#footer {
	width: 840px;
	height: 62px;
	margin: 0px auto;
	background: url(image/bas.jpg);
	clear: both;
}
div#page {
	float: left;
	width: 604px;
	margin-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
div#menu {
	float: left;
	width: 214px;
	background: url(image/fond_menu.jpg);
}
div#menu_menu {
	height: 106px;
	background: url(image/menu.jpg);
}
div#menu_wow {
	height: 65px;
	background: url(image/wow.jpg);
}
div#menu_war {
	height: 65px;
	background: url(image/war.jpg);
}
div#menu_aide {
	height: 65px;
	background: url(image/aide.jpg);
}
div#menu_fin {
	height: 27px;
	background: url(image/bas_menu.jpg);
}
div#menu_lien {
	width: 140px;
	margin: 0px 65px;
}
div#menu_lien_wow {
	width: 140px;
	margin: 0px 65px;
}
div#menu_lien_war {
	width: 140px;
	margin: 0px 65px;
}
div#menu_lien_aide {
	width: 140px;
	margin: 0px 65px;
}
div#page_haut {
	width: 600px;
	height: 22px;
	background: url(image/page_haut.jpg);
}
div#page_bas {
	width: 600px;
	height: 14px;
	background: url(image/page_bas.jpg);
}
div#page_centre {
	width: 600px;
	margin: 0px;
	padding: 0px;
	background: url(image/page_centre.jpg);
}
div#page_texte {
	margin: 0px auto 0px;
	width: 590px;
}
div#page_middle {
	width: 600px;
	border: 1px solid #ffd030;
}

a:link {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:visited {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #E1E1E1; text-decoration: none}
a:active {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #FFFF99; text-decoration: none}
a:hover {color: #ffcc00; font-size: 8pt; font-weight: bold; font-family: Verdana, Arial; text-decoration: underline}





index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>..:: Ash's Blog ::..</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
        <link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript">
			function lien(monLien) {
				window.open(monLien, '_blank');
				return false;
				}
		</script>
	</head>
<body>
<div id="contenu">
	<div id="header"><div id="header_d"></div></div>
	<div id="menu">
		<div id="menu_menu"></div>
			<div id="menu_lien">
				<a href="?r=news">Accueil</a><br />
                <a href="?r=rechercher">Rechercher</a><br />
                <a href="?r=presentation">Pr&eacute;sentation</a><br />
                <a href="?r=site">Le site</a><br />
                <a href="?r=contact">Contact</a><br />
                <a href="?r=lien">Lien</a><br />
                <a href="admin/index.php" onclick="return lien(this.href);">Administration</a>
				<br /><br />
			</div>
		<div id="menu_wow"></div>
			<div id="menu_lien_wow">
				<a href="?r=wow_hall">Hall of Fame</a><br />
                <a href="?r=profil_wow">Mon Profil</a><br />
                <a href="?r=interface">Interface</a><br />
                <a href="?r=boss">Tableau de chasse</a><br /><br />
			</div>
		<div id="menu_war"></div>
			<div id="menu_lien_war">
				<a href="?r=profil_war">Mon Profil</a><br /><br />
			</div>
		<div id="menu_aide"></div>
			<div id="menu_lien_aide">
				<a href="?r=php">PHP</a><br />
                <a href="?r=sql">SQL</a><br />
                <a href="?r=contact">Proposer</a>
			</div>
		<div id="menu_fin"></div>
	</div>
	<div id="page">
		<div id="page_haut"></div>
		<div id="page_centre">
			<div id="page_texte">
				<p style="text-align: center;"><a href="#" onclick="window.open('http://romain.bertolucci.free.fr/test/image/archimonde.jpg','Archimonde','toolbar=0,menubar=0,location=0,scrollbars=0,width=900,height=720')"><img src="http://romain.bertolucci.free.fr/test/image/archimondep.jpg" style="border: 0px" alt="Archimonde" /></a></p>
				
				Ca marche bien !
			</div>
		</div>
		<div id="page_bas"></div>
	</div>
	<div id="footer"></div>
</div>
<p style="text-align: center">
    <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" style="border: 0px" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <img src="http://www.w3.org/Icons/valid-css-blue" style="border: 0px" alt="Valid CSS Level 1" height="31" width="88" />
</p>
</body>
</html>


Résultat : http://romain.bertolucci.free.fr/site

Il n'y a pas de soucis sur Internet Explorer, mais sur Firefox, on vois que dans le centre ou il y a l'image, les bordures du haut et du centre ne sont pas raccordées.

La page a été validé par le w3c validator.



Et la je bloque, je ne trouve pas l'erreur Smiley ohwell

upload/14354-Sanstitre.JPG
Salut DevJoe Smiley cligne ,

cela vient du <p> qui a une marge par défaut : lui attribuer un margin:0 devrait résoudre le problème.

A+
Sujet clos
Aller à