5568 sujets

Sémantique web et HTML

Affichage sous IE

Bonjour à vous,

je viens vous consulter car je rencontre un problème d'affichage sous IE7.

J'ai une page en XHTML 1.0 strict. Celle-ci est composé de plusieurs div pour la disposition globale de la page ( Header, main, footer ).

La div "main" est composé elle aussi de deux div :
-menu => div déclarée avec un float:left
-centrale => div déclarée avec un float:none

Ma page passe le validateur W3C sans aucun soucis. Sous firefox, l'affichage de la page est tel que je le désire mais sous IE ca bug. Je m'explique :

Dans la div "centrale" j'affiche deux éléments :
-un heading de type 3 centré avec la balise <center></center>
-le tableau

Sous firefox, le tableau s'affiche bien en dessous du heading mais sous le tableau s'affiche en dessous du heading mais avec un espace énorme. Cet espace est de la taille de la div menu. L'affichage du tableau commence là où se termine la div menu...

A quoi cela est il du?

Merci de votre aide

Archange
surement dû à un clear:both dans les parrages..

sinon un truc me semble bien bizzare comment avec une balise <center> tu as pu être validé xhtml1.0 strict???
En effet, mea culpa...

C'est le plugin firefox "HTML validator" qui fous la zouille... En validant à partir du site du W3C, cela me remonte l'erreur Smiley smile

Pour le clear:both qui trainerai dans les parages, j'en ai bien un mais il est situé dans une div situé aprés la div "centrale" pour être sur que la div "centrale" occupe bien au moins la taille de la div "menu". J'ai essayé au cas où de viré cette div, mais cela ne change rien...

Voici le code synthétisé de la page :


 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="css/interface.css" />
<title>kikoo lol</title>
</head>

<body>
<div class="header">
	le header
</div>
<div class="main">
	<hr class="sep" />
	<div class="menuGauche">
		<div class="headerMenu">
			un ss menu
		</div>
		<a href="#" class="liensGauche">un lien</a><br />
		<a href="#" class="liensGauche">Un autre lien</a><br />
		<hr class="menuGauche" />
		<div class="headerMenu">
			un autre ss menu
		</div>
		<a href="#" class="liensGauche">troisiéme lien</a><br />
	</div>
	<div class="centrale">
		<h3>le heading</h3><br />
		<table border="0">
			<tr>
				<th>Un entete</th>
			</tr>
			<tr>
				<td>Une info</td>
			</tr>
		</table>
	</div>
	<div class="spacer"> </div>
</div>
<div class="footer">
	<hr class="sep" />
	Quelques infos supp
</div>
</body>
</html>


et voici les déclaration css correspondant au classe :

div.header {
	clear:both;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:950px;
	height:150px;
	background-color:#f0f0f0;
}
div.main {
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	width:950px;
	background-color:#f0f0f0;
}
div.menuGauche {
	float:left;
	margin-top:5px;
	width:150px;
	border-right: 2px dashed #3399FF;
	background-color:#f0f0f0;
}
div.centrale {
	float:none;
	margin-left:170px;
	margin-right:20px;
	margin-top:10px;
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
div.footer {
	clear:both;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	width:950px;
	height:40px;
	background-color:#f0f0f0;
	text-align:center;
	font-size:12px;
}
div.headerMenu {
	text-align:center;
	color:#3399FF;
	font-size:14px;
	border-bottom:1px hidden;
}
div.ssMenu {
	text-align:center;
	color:#3366FF;
	font-size:13px;
	border-bottom:1px hidden;
}
HR.sep {
	clear:both;
	border: 1px inset #3399FF;
	margin-bottom:5px;
	margin-top:0px;
}
HR.menuGauche {
	width:50px;
	border: 1px inset #3399FF;
}
.spacer {
  clear: both;
}


Bon, finalement, j'ai trouvé mon erreur... Cela venait du style associé à mon tableau. Dans ce style, je déclare le tableau avec un width:100%. Si j'enléve cette déclaration, hop plus d'espace Smiley cligne

Par contre je ne vois pas pourquoi ce width:100% m'emm**de comme ca. Vous pourriez m'expliqué svp ?

Archange
Modifié par Archange (28 Dec 2006 - 17:13)
Sujet clos
Aller à