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
Configuration: Windows Vista
Firefox 3.0.12