[Résolu] Largeur bloc central : débordement horizontal sous IE6

Question

Pimiento

5 Jan 2007 à 18:58

Bonjour à tous !
Je souhaite à chacun de vous une excellente année 2007 !

Bon, voici mon problème :
J'ai créé une page, en l'occurence une newsletter. Sur IE6, le bloc central déborde horizontalement sur le côté droit et pas qu'un peu.
J'ai bien vérifié mon code html et ma css, tout semble correct, je ne comprends pas d'où vient le problème et j'ai rien trouvé sur les forums.
Je suis débutante.

La page est ici : http://e.guerfi.free.fr/PREPROD/news/news.html[/url]

Et voici son code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cho&iuml;  - News #1 - Janvier 2007</title>
</head>
<style type="text/css" media="screen">
<!--
/* Eléments HTML
*******************************************************************************/
body{ 
	margin: 10px 0 10px;
	background-color: #ffffff;
	font: 11px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align:center;
}
p { 
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
	font-size: 9px; 
}
a {
	font-size: 9px; 
	color: #999;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration:underline;
	background-color:#c31d37;
}
a img {
	border: none;
}
/* Page
*******************************************************************************/
#global {
	width: 600px;
	margin: 0 auto;
	padding: 20 0px 20 0px;
	text-align:left;
}
#header {
	height:94px; 
	border-right: 2px solid #e4d6d6;
}
/* Contenu
*******************************************************************************/
#content {
	width: 600px;
	height:auto; 
	background-color:#fdf1f7;
	border-left: 1px solid #e4d6d6;
	border-right: 1px solid #e4d6d6;
	border-bottom:1px solid #e4d6d6;
	float: left;
}
.titre-lettre {
	margin-top: 1px;
	margin-left: 465px;
	font-weight: bold; 
	color:#c31d37;
}
#chapo {
	width:450px;
  	margin-top: 20px;
	margin-left: 75px;
	margin-right: 75px;
	font-size: 11px;
	text-align:justify;
	float:left;
}
#rubriques {
	width:450px;
	padding-top:35px;
	margin-left: 75px;
	margin-right: 75px;
	float:left;
}
.titre {
	font-size: 11px; 
	font-variant:small-caps;
	font-weight: bold; 
	color:#c31d37;
	clear:left;
}
#cadre {
	width:450px;
	height:75px;
  	padding-top:10px;
	float:left;
}
.image-rubriques {
	padding-left:5px;
	padding-right:5px;
	float:left;
}
#legende-rubriques {
	width:365px;
	padding-left:1px;
	text-align:justify;
	float:right;
}
.url-rubriques {
	padding-left:305px;
	padding-bottom:20px;
	text-align:right;
	clear:both;
}
.filet {
	border-bottom: 1px solid #f8e2ec;
}
#envoyer {
	width:200px;
	height:15px;
	margin: 0 auto ;
  	clear:left;
}
.enveloppe {
	padding:5px 2px 0 2px;
	float:left;
}
#texte-envoyer {
	width:175px;
	padding: 2px 0 5px;
	float:right;
}
#footer {
	clear: both;
	padding-bottom: 8px;
}
-->
</style>
<body>
<div id="global">
<div id="header"><a title="Choï" href="http://www.choihj.com/" target="_blank"><img alt="Logo Choï" width="600" height="93" src="http://e.guerfi.free.fr/PREPROD/news/img/header.gif"/></a></div>
<div id="content">
<div class="titre-lettre">
<p>News #1</p>
</div>
<div id="chapo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Suspendisse tincidunt quam accumsan dolor. Nullam nec mi. Nullam enim. Sed convallis, turpis et convallis euismod, est risus hendrerit urna, in dictum enim tellus eget nisi. Duis scelerisque.
</div>
<div id="rubriques">
<div class="titre">Collections</div>
<div class="filet"></div>
<div id="cadre">
<img class="image-rubriques" width="70" height="70" src="http://e.guerfi.free.fr/PREPROD/news/img/collec.jpg" alt="Collections" />
<div id="legende-rubriques">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Suspendisse tincidunt quam accumsan dolor. Nullam nec mi. Nullam enim. Sed convallis, turpis et convallis euismod, est risus hendrerit urna, in dictum enim tellus eget nisi. </div>
 </div>
 <div class="url-rubriques">
<a href="" target="_blank">&gt; Découvrez les collections </a></div>
<div class="titre">Accessoires</div>
<div class="filet"></div>
<div id="cadre">
<img class="image-rubriques" width="70" height="70" src="http://e.guerfi.free.fr/PREPROD/news/img/access.jpg" alt="Accessoires" />
<div id="legende-rubriques">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta.  Suspendisse tincidunt quam accumsan dolor. Nullam nec mi. Nullam enim.  Sed convallis, turpis et convallis euismod, est risus hendrerit urna,  in dictum enim tellus eget nisi. </div>
</div>
 <div class="url-rubriques">
<a href="" target="_blank">&gt; Découvrez les accessoires </a></div>
<div class="titre">Ev&eacute;nements</div>
<div class="filet"></div>
<div id="cadre">
<img class="image-rubriques" width="70" height="70" src="http://e.guerfi.free.fr/PREPROD/news/img/events.jpg" alt="Evénements" />
<div id="legende-rubriques">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta.  Suspendisse tincidunt quam accumsan dolor. Nullam nec mi. Nullam enim.  Sed convallis, turpis et convallis euismod, est risus hendrerit urna,  in dictum enim tellus eget nisi.</div>
 </div>
 <div class="url-rubriques">
<a href="" target="_blank">&gt; Découvrez les événements </a></div>
<div class="titre">Qui est Cho&iuml; ?</div>
<div class="filet"></div>
<div id="cadre">
<img class="image-rubriques" width="70" height="70" src="http://e.guerfi.free.fr/PREPROD/news/img/choi.jpg" alt="Qui est Choï ?" />
<div id="legende-rubriques">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta.  Suspendisse tincidunt quam accumsan dolor. Nullam nec mi. Nullam enim.  Sed convallis, turpis et convallis euismod, est risus hendrerit urna,  in dictum enim tellus eget nisi. </div>
</div>
<div class="url-rubriques">
<a href="" target="_blank">&gt; Découvrez qui est Choï</a></div>
</div>
<div id="envoyer">
<img class="enveloppe" width="14" height="11" src="http://e.guerfi.free.fr/PREPROD/news/img/enveloppe.gif" alt="Envoyer à un ami" />
<div id="texte-envoyer"><a href="mailto:?subject=Un%20ami%20vous%20conseille%20cette%20lettre&body=Un%20ami%20vous%20invite%20a%20decouvrir%20la%20newsletter%20de%20Choi,%20styliste,%20creatrice%20pret-a-porter%20Homme-Femme%20:%20http://e.guerfi.free.fr/PREPROD/news/news.html" target="_blank">Envoyer cette lettre &agrave; un ami</a> </div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

J'espère que vous pourrez m'aider.
Merci beaucoup.
Modifié par Pimiento (06 Jan 2007 - 16:35)

Antoine Cailliau

5 Jan 2007 à 21:48

Cela est sans doute du au fait que le modèle de boîte n'est pas le même. C'est un classique de width et padding Smiley cligne

> Lien
Modifié par Raphael (05 Jan 2007 - 22:50)

Pimiento

6 Jan 2007 à 16:27

Merci pour cette réponse et toutes ces infos, c'était effectivement ça qui coinçait et à présent ça marche !

J'ai remplacé les padding par des margin et bidouillé leur longueur pour IE6 en insérant dans ma page un

<!--[if lte IE 6]>
<style type="text/css">

</style>
<![endif]-->

Merci beaucoup Smiley smile

Raphael

Administrateur

6 Jan 2007 à 16:32

Bravo

Tu considères que ce sujet est [Résolu] ? Smiley cligne

Pimiento

6 Jan 2007 à 16:36

Oui pardon ! C'est fait, je n'oublierai plus ! Smiley ravi

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Largeur bloc central : débordement horizontal sous IE6