28220 sujets

CSS et mise en forme, CSS3

Height 100% => Dépassement sous IE

Bonjour,

Après avoir lu plusieurs tutoriels sur ce site et d’autres. J’ai mis en place une maquette pour un site à venir.

Cette maquette repose sur du code XHTML 1.0 Strict : XHTML

Et sur du CSS : CSS.

Mon problème :

Sous FireFox et Opéra, la hauteur par défaut s’affiche bien sur 100%, mais sous IE, la hauteur totale de la page dépasse nettement cette limite.

Il faut noter que j’ai déjà effectué plusieurs tests sur ma feuille de style : avec conteneur (cellule) à 100% et contenu (tableau) à auto - avec conteneur (cellule) à auto et contenu (tableau) à 100% - avec les deux à 100%... mais rien n’y fait. Alors que sous Firefox et Opéra je tombe toujours « juste », sous IE, je suis soit trop court (avec le contenu ou le conteneur en auto) soit trop long (avec les deux en 100%).

Toute aide est la bienvenue, merci.

P.S : je tiens à m’excuser par avance si un post exactement similaire aurait déjà été résolu. J’ai effectué une recherche sans succès.
Pour donner un peu plus d'informations, voilà le code XHTML en question :


<!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" dir="ltr">
<head>
<title>Test height:100% </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<table class="main" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td class="menu">
		<table class="fullHeight" width="150" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td class="menuImage">
				&nbsp;
				</td>
			</tr>
			<tr align="center">
				<td class="menuRightLine">
				<div class="menu">
				&nbsp;
				</div>
				</td>
			</tr>
			<tr align="center">
				<td class="menuFullRightLine">
				&nbsp;
				</td>
			</tr>
			<tr align="center">
				<td class="menuRightLine">
				&nbsp;
				</td>
			</tr>
			<tr align="center">
				<td class="menuRightLine">
				&nbsp;
				</td>
			</tr>
		</table>
		</td>
		<td class="content">
		<table class="fullHeight" width="100%" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td class="banner">
				&nbsp;
				</td>
			</tr>
			<tr>
				<td class="contentText">
				&nbsp;
				</td>
			</tr>
			<tr align="center">
				<td class="bottom">
				&nbsp;
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</body>
</html>


Et le CSS associé : 


html, body {
  height:100%
	}

body {
	background-color:#777777;
  width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-align:center;
	}

div.menu {
	position:relative;
	height:127px;
	top:10px
}

table.main {
	margin-left: auto;
	margin-right: auto;
	width:780px;
	height:100%;
	background-color:#666666;
	border:solid;
	border-color:#FF9900;
	border-top-width:0px;
	border-bottom-width:0px;
	border-left-width:1px;
	border-right-width:1px;
	text-align:left;
	}

table.fullHeight,td.menu,td.content,td.contentText {
	height:100%;
	}

td.menu,td.content,td.contentText {
	vertical-align:top;
	}

td.menu {
	width:150px
 }

td.content {
 width:100%
 }

td.menuImage {
	border:solid;
	border-color:#FF9900;
	border-top-width:0px;
	border-bottom-width:1px;
	border-left-width:0px;
	border-right-width:0px;
	height:240px;
	}

td.menuRightLine {
	border:solid;
	border-color:#FF9900;
	border-top-width:0px;
	border-bottom-width:0px;
	border-left-width:0px;
	border-right-width:1px;
	height:32px;
	vertical-align:top
	}

td.menuFullRightLine {
	border:solid;
	border-color:#FF9900;
	border-top-width:0px;
	border-bottom-width:0px;
	border-left-width:0px;
	border-right-width:1px;
	height:100%
	}

td.banner {
	border:solid;
	border-color:#FF9900;
	border-top-width:0px;
	border-bottom-width:1px;
	border-left-width:0px;
	border-right-width:0px;
	height:100px;
	}

td.bottom {
	font-family:Arial,Helvetica,Verdana,sans-serif;
	font-size:8pt;
	color:#333333;
	border:solid;
	border-color:#FF9900;
	border-top-width:1px;
	border-bottom-width:0px;
	border-left-width:0px;
	border-right-width:0px;
	height:30px
	}


Pour la colonne de gauche : le problème vient de la cellule utilisant la classe "menuFullRightLine".

Pour la colonne de droite : le problème vient de la cellule utilisant la classe "contentText".
Modifié par uTROT (17 Nov 2005 - 20:58)
Je remonte le message juste une fois ... Toujours pas résolu (cf. Post précédent).

Pour toute aide, merci d'avance.
Hello,

La gestion des éléments en hauteur 100% est toujours délicate surtout sous IE qui a une gestion particulière du HTML... Dans ton cas, il te suffit d'ajouter le prologue XML (cette piste est évoquée dans la FAQ, suivre ce lien : http://forum.alsacreations.com/faq/#item57) dans ton code.

Il te faudra également ajouter un "overflow:hidden" sur ton body pour empêcher l'apparition disgracieuse de l'ascenceur vertical...toujours sous IE !

Smiley smile
Merci beaucoup pour vos réponses.

Nilpohc, j'ai ajouté le prologue XML à mon document XHTML et ça fonctionne parfaitement... ! IE est très étrange tout de même.

Le sujet est donc résolu, merci à tous.
Sujet clos
Aller à