vendredi 3 novembre 2017

HTML et le désespoir des TABLE en folie: IMG dont la hauteur ne veut pas s'adapter verticalement dans un TD

C'est le drame du HTML, langage qui se voulait simple à l'origine, et qui avec le temps est devenu complexe. Avant de pleurer sur le temps perdu et la nostalgie informatique, voici le drame qui me chagrine.

En ressortant un vieux développement PHP, j'ai découvert que le code HTML basé sur un tag TABLE classique provoquait un affichage aberrant. Voici le principe en pseudo HTML de cet affichage:
<TABLE>
<TR><TD> <IMG src="coin_0.gif"></TD>
<TD> <IMG src="barre_h_h.gif"> </TD>
<TD> <IMG src="coin_1.gif"></TD> </TR>
<TR><TD> <IMG src="barre_v_g.gif" /></TD>
<TD>...texte sur n lignes....</TD>
<TD> <IMG src="barre_v_d.gif" /></TD> </TR>
<TR><TD> <IMG src="coin_3.gif"></TD>
<TD> <IMG src="barre_h_b.gif"></TD>
<TD> <IMG src="coin_2.gif"></TD> </TR>
</TABLE>

Je sais que beaucoup vont parler de code archaïque (en insistant sur le caractère péjoratif), mais j'aime la simplicité, et la logique implacable d'un TABLE sur un DIV, ou autres éléments HTML servant pour les mises en page. Mais cela est une autre histoire. Le code ci dessus marchait à l'aide des attributs permettant de réduire le "border", le "spacing", ou autre "margin" ( border="0" cellspacing="0" cellpadding="0"). Pour que les images s'adaptent parfaitement à la taille dynamique des cellules du tableau, il suffisait de mettre des "height="100%" ou width="100%" sur les bons TD. Le principe est de mettre des dimensions fixes pour les 4 "coins", et de mettre ensuite 100% sur les witdh des images devant s'élargir horizontalement, et 100% sur les "height" des images devant s'élargir en hauteur. En revanche, la case du milieu contenant le texte sur plusieurs lignes, est sans dimensions.

Cela donnait tout simplement cela:
La même chose avec un "border=1" pour visualiser les 9 cases de mon tableau:

Pour la petite histoire, ce type de code HTML, me permettait d'afficher simplement des graphsets, de plusieurs types, avec des bords ronds, carrées ou autres. En final, j'ai amèrement découvert que mon code HTML après quelques années de mise en sommeil donnait ce résultat :

Le plus étonnant, c'est que les images s'adaptent parfaitement en largeur (sauf 0.2px sur la droite, Dieu sait pourquoi), mais seulement partiellement sur la hauteur. En utilisant l'inspecteur d'éléments dans le navigateur, on constate une ligne blanche en dessous de l'image, et une autre au dessus, interprétées par l'inspecteur comme un "padding" (en vert sur la copie d'écran ci-dessus).
Pour Tenter de résoudre mon problème, j'ai donc nettoyé le code en utilisant des propriétés CSS à la place des attributs (souvent devenu obsolètes, mais opérationnel théoriquement). Voici le code en question:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML> <HEAD> <style type="text/css"> table { border-collapse: collapse; /* Colle les bordures entre elles */ border-spacing: 0; margin: 0 0 0 0 ; padding: 0 0 0 0 ;
border: 0; } td { margin: 0; padding: 0 ; border-spacing: 0; } tr { margin: 0; padding: 0 ; border-spacing: 0; } </style> <TITLE>Table avec images extensibles </TITLE> </HEAD> <BODY> <BR> <BR> <CENTER> <TABLE> <tbody> <TR><TD width="19" height="19"><IMG alt="" width="19" height="19" src="el/fin_coin_0.gif"></TD> <TD height="19"><IMG alt="" height="19" width="100%" src="el/fin_barre_h_h.gif"></TD> <TD width="19" height="19"><IMG alt="" width="19" height="19" src="el/fin_coin_1.gif"></TD> </TR> <TR><TD width="19" height="100%"><IMG alt="" width="19" height="100%" src="el/fin_barre_v_g.gif" /></TD> <TD>Les plus désespérés sont les chants les plus beaux,<BR>Et j'en sais d'immortels qui sont de purs sanglots.<BR><BR>La muse<BR>Alfred de Musset (1810-1857)</TD> <TD width="19" height="100%" style="font-size: 0;line-height:0;"><IMG style="font-size: 0;line-height:0;" alt="" width="19" height="100%" src="el/fin_barre_v_d.gif" /></TD> </TR> <TR><TD width="19" height="19"><IMG alt="" width="19" height="19" src="el/fin_coin_3.gif"></TD> <TD height="19"> <IMG alt="" height="19" width="100%" src="el/fin_barre_h_b.gif"></TD> <TD width="19" height="19"><IMG alt="" width="19" height="19" src="el/fin_coin_2.gif"></TD> </TR> </tbody> </TABLE> </CENTER> </BODY>


Je peux vous assurer avoir essayé toutes les propriétés CSS possibles sur les TD et IMG pour faire disparaitre ces deux lignes blanches non désirées, sans succès. (display, box-sizing, line-height, font-size, ...). J'ai tenté également de mettre un DIV pour encapsuler l'IMG, avec un "height" à 100%, sans succès.

Après quelques heures éprouvantes, j'ai testé le même code HTML sur un linux, les tests précédents ont été réalisés sous Windows 7 avec Opera, Chrome, IE. Et bingo, le code HTML s'affichait correctement avec firefox. De nouveau de retour sur W7, et bing encore: Firefox affiche correctement le code HTML. La malchance d'avoir testé sur 3 navigateurs, et d'oublier FF.

Maintenant j'ai une piste. Le problème vient donc de certains navigateurs, certainement racistes envers les tag TABLE. Je m'en doutais, car depuis l'inquisition espagnole, on a rarement vue un tel sectarisme religieux concernant ces pauvres TABLE parmi la communauté HTML.

Me voila donc reparti sur une recherche de solution pour tous les navigateurs.
Suite au prochain épisode (je l'espère, sinon cela veut dire que le sectarisme a gagné ;)

Zip contenant l'exemple