Height:100% dans table sur ie

Fermé
Jeffy2b - 23 juil. 2009 à 17:59
 Jeffy2b - 30 juil. 2009 à 09:53
Bonjour à tous et à toutes,

voilà deux jours que j'essaye de règler un problème de height:100% sans trop réussir. J'ai essayé de regarder à droite et à gauche en tentant à la volée deux ou trois solutions sur le net mais rien !
Tout fonctionne normalement sur ff et safari mais ie => zéro.

Voici le html (extrait du moins) si quelqu'un peut en résoudre le problème :

<!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />/** Feuille Css **/</head>
<body>
<div id="cadre_page">
	<div class="main-bg">
		<div id="header-bg">
			<div id="header-l">
				<div>
					<table border="0" cellpadding="0" cellspacing="0" id="header-ls">
						<tbody>
							<tr>
								<td rowspan="2" valign="top" id="logo_jeu">/** Logo **/</td>
								<td valign="top" class="nom_jeu">/** Nom + Slogan **/</td>
								<td rowspan="3"></td>
							</tr>
							<tr>
								<td valign="top" align="center" class="icones_menu" nowrap>/** Icones **/</td>
							</tr>
							<tr>
								<td height="120" colspan="2"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div id="page-bg">
			<table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td height="100%" valign="top">
/==> PROBLEME
						<div style="height:100%;"></div></td>
					<td id="page-bg" valign="top">/** Menu **/</td>
				</tr>
				<tr>
					<td class="pageContent" valign="top" height="100%">/** Contenu Central **/</td>
				</tr>
				<tr>
					<td></tbody></td>
				</tr>
			</table>
			</td>
			</tr>
			/** footer **/
			</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>


Extrait CSS :

body{position:relative;height:100%}

/* header */
#header-bg{ background-color: rgb(87, 87, 87); background-image: url(../images/page/header_bg.png);height:280px;width:100%;}
#header-l{height: 100%; width:100%;background-image: url(../images/page/header_l.jpg); background-repeat: no-repeat;}
#header{ width:426px;height:280px;}
#header-ls{height:280px;}
#logo_jeu{width:137px;}

/* Menu de Gauche */
#leftbg{padding-left: 25px; width:277px;background-image: url(../images/page/lbg_t.gif); background-repeat: no-repeat;}
#submenu-bg{width: 219px; height: 244px; background-color: rgb(255, 255, 255); background-image: url(../images/page/submenu_bg.gif);}
#submenu-tbg{background-image: url(../images/page/submenu_tbg.gif); background-repeat: no-repeat;}
#submenubbg{width: 100%; height: 244px; background-image: url(../images/page/submenu_bbg.jpg); background-position: left bottom; background-repeat: no-repeat;}

/* Page */
#page-bg{background-image: url(../images/page/bg.gif); background-repeat: repeat-x;width:100%;height:100%;}

/*backgrounds*/
.main-bg {background-color: #27C3CD; width:1024px;}
#cadre_page{position:static;margin-left: auto;margin-right: auto;width: 1024px;border:solid 5px white;}


tout se passe donc dans la div "page-bg". Si jamais quelqu'un arrive à y voir clair. Merci beaucoup,

cordialement, Geoffroy
A voir également:

5 réponses

Je vous transmet un code plus vosible :

<!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />/** Feuille Csss **/</head>
<body>
<div id="cadre_page">
<div class="main-bg">
<div id="header-bg">
<div id="header-l">
<div>
<table border="0" cellpadding="0" cellspacing="0" id="header-ls">
<tbody>
	<tr>
		<td rowspan="2" valign="top" id="logo_jeu">/** Logo **/</td>
		<td valign="top" class="nom_jeu">/** Nom + Slogan **/</td>
		<td rowspan="3"></td>
	</tr>
	<tr>
		<td valign="top" align="center" class="icones_menu" nowrap>/** Icones **/</td>
	</tr>
	<tr>
		<td height="120" colspan="2"></td>
	</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="page-bg">
<table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td height="100%" valign="top">/==> PROBLEME
		<div style="height:100%;"></div></td>
	<td id="page-bg" valign="top">/** Menu **/</td>
</tr>
<tr>
	<td class="pageContent" valign="top" height="100%">/** Contenu Central **/</td>
</tr>
/** footer **/
</table>
</div>
</div>
</div>
</body>
</html>
0
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
23 juil. 2009 à 19:19
Explique d'avantage le problème ?!

;D
0
Salut, merci d'avoir répondu en tout cas. Comme le montre mes derniers messages, il y a un ensemble d'imbrication de tables et de div. Et en fait, dans l'un, malgré le height:"100%", il ne prend pas en compte la hauteur du tableau parent.

Il ne prend que la hauteur du contenu de la cellule du tableau et non celle de la cellule qui la contient.
J'espère que c'est clair. Sinon, je te mets en ligne les travaux déjà réalisés !!!!
0
Salut, voici comme promis un petit lien sur mes travaux :

http://footballultimate.univers-game.com/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Hop...je relance un peu le sujet....Personne n'a d'idées ?
0