Ce post fait référence à un autre post plus ancien intitulé "HEIGHT 100% avec IE", j'ai d'abord ajouter un commentaire, mais j'ai finalement décidé d'ouvrir un autre sujet, je pense en effet que l'autre était trop vieux pour être vu. Voilà ce que j'avais écrit.
Bien le bonjour à tous. Ce sujet est assez vieux, mais j'aimerais le remettre au gout du jour. Il rejoint en effet un problème que j'ai découvert il y a quelques jours en travaillant sur la maquette d'un site pour un client.
Je m'explique :
Pour commencer, il se trouve que je suis obligé de respecter la dtd xhtml transitional, d'où l'utilisation du DOCTYPE en début de page.
Bon maintenant, sachez aussi que j'ai lu pas mal de chose, y compris sur alsacreations concernant le respect des normes, le wc3, le height:100% et patati et pata, même un article très interessant sur le rendu "compatible" et le rendu "strict". Ceci dit, voilà ce dont je me suis rendu compte.
Apparement, avec la déclration DOCTYPE (cf. ci-dessus), le rendu d'une valeur height:100% sous FireFox et Internet Explorer n'est pas le même (FireFox v. 1.5.0.1 et IE v. 6.0.....). En effet, il semble que pour FireFox, cette valeur attribuée à un élément lui donne comme "véritable" auteur la auteur restante de sons élément parent. IE lui attribur 100% de la hauteur de l'élément parent. Un petit exemple pour vous rendre compte. Voici donc une page toute bête :
Enorme n'est-il pas ! Vous noterez donc l'utilisation du DOCTYPE. Les éléments body et html on un style height:100%. Ensuite vient un tableau lui aussi en 100% avec deux lignes, l'une de 10px et l'autre pour l'instant sans hauteur spécifiée. Déjà là, on peut observer une différence entre FF et IE. Alors que FF nous rend bien une cellule de 10px et l'autre de "reste de la hauteur du parent", IE lui n'a pa l'air de comprendre. Alors, là, je vous vois venir, vous vous dites "oui mais faut ajouter height:100% à la dernière ligne". Et bien faites..... Alors ? Vous devez vous retrouver avec effectivement la première ligne/cellule à 10px et l'autre qui a l'air de faire 100%. Mais elle n'en à que l'air, puisque comme j'ai essayé de vous expliquer pus haut, sous IE, vous vous rendrez compte que la dernière ligne fait maintenant véritablement 100% de la hauteur du tableau, et donc du body et donc de html. Alors que FF lui continu de nous afficher u tableau de 100% avec une ligne de 10px et l'autre du reste de la hauteur disoponible. Maintenant, enlevez la DTD pour voir, ou ajoutez un carractère en tout début de page pour faire basculer IE en mode de rendu "compatible".
L'exmple est ici simpliste, mais dans le cadre d'une maquette complète, cela peu rapidement poser problème (c'est d'ailleurs mon cas). Mes questions sont donc les suivante.
Déjà, arrivez vous aux même constatations ?
Voyez vous une autre explication que "c le rendu qui n'est pas gérer de la même façon"
Le faite de faire baculer IE permet il tjs de dire que l'on respecte la DTD ?
Voilà, j'espère avoir été assez clair. Si vous ne coprenez pas bien, je peux tenter d'être plus explicite.
Bien le bonjour à tous. Ce sujet est assez vieux, mais j'aimerais le remettre au gout du jour. Il rejoint en effet un problème que j'ai découvert il y a quelques jours en travaillant sur la maquette d'un site pour un client.
Je m'explique :
Pour commencer, il se trouve que je suis obligé de respecter la dtd xhtml transitional, d'où l'utilisation du DOCTYPE en début de page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Bon maintenant, sachez aussi que j'ai lu pas mal de chose, y compris sur alsacreations concernant le respect des normes, le wc3, le height:100% et patati et pata, même un article très interessant sur le rendu "compatible" et le rendu "strict". Ceci dit, voilà ce dont je me suis rendu compte.
Apparement, avec la déclration DOCTYPE (cf. ci-dessus), le rendu d'une valeur height:100% sous FireFox et Internet Explorer n'est pas le même (FireFox v. 1.5.0.1 et IE v. 6.0.....). En effet, il semble que pour FireFox, cette valeur attribuée à un élément lui donne comme "véritable" auteur la auteur restante de sons élément parent. IE lui attribur 100% de la hauteur de l'élément parent. Un petit exemple pour vous rendre compte. Voici donc une page toute bête :
<!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" style="height:100%">
<head>
<title>Page sans titre</title>
</head>
<body style="height:100%;padding:0px;margin:0px 0px 0px 50px" >
<table style="height:100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px;width:10px">a</td>
</tr>
<tr>
<td>b</td>
</tr>
</table>
</body>
</html>
Enorme n'est-il pas ! Vous noterez donc l'utilisation du DOCTYPE. Les éléments body et html on un style height:100%. Ensuite vient un tableau lui aussi en 100% avec deux lignes, l'une de 10px et l'autre pour l'instant sans hauteur spécifiée. Déjà là, on peut observer une différence entre FF et IE. Alors que FF nous rend bien une cellule de 10px et l'autre de "reste de la hauteur du parent", IE lui n'a pa l'air de comprendre. Alors, là, je vous vois venir, vous vous dites "oui mais faut ajouter height:100% à la dernière ligne". Et bien faites..... Alors ? Vous devez vous retrouver avec effectivement la première ligne/cellule à 10px et l'autre qui a l'air de faire 100%. Mais elle n'en à que l'air, puisque comme j'ai essayé de vous expliquer pus haut, sous IE, vous vous rendrez compte que la dernière ligne fait maintenant véritablement 100% de la hauteur du tableau, et donc du body et donc de html. Alors que FF lui continu de nous afficher u tableau de 100% avec une ligne de 10px et l'autre du reste de la hauteur disoponible. Maintenant, enlevez la DTD pour voir, ou ajoutez un carractère en tout début de page pour faire basculer IE en mode de rendu "compatible".
L'exmple est ici simpliste, mais dans le cadre d'une maquette complète, cela peu rapidement poser problème (c'est d'ailleurs mon cas). Mes questions sont donc les suivante.
Déjà, arrivez vous aux même constatations ?
Voyez vous une autre explication que "c le rendu qui n'est pas gérer de la même façon"
Le faite de faire baculer IE permet il tjs de dire que l'on respecte la DTD ?
Voilà, j'espère avoir été assez clair. Si vous ne coprenez pas bien, je peux tenter d'être plus explicite.
