Dernier bogue de maquette (presque) résolu
Un dernier bogue dans la construction de la maquette rendait l'affichage des menus problématique sous certaines conditions. Il est en partie résolu.
Ce bogue apparaissait lorsque l'on augmente la taille du texte avec la commande du menu Affichage -> Taille du texte: le sous-menu chevauchait alors en partie le menu principal.
Le fait est que l'entête du site contient plusieurs boîtes définies différemment: si la zone de logo doit avoir une taille verticale en pixels, puisque l'image qu'elle contient fait 100 pixels de hauteur, les menus eux doivent être définis en unité relative, les em, puisqu'ils contiennent du texte, et que ce texte grandit quand on change sa taille par défaut. Il faut ensuite tenir compte des bords de chaque boîte, définis en pixels, l'espace de 1px entre les boîtes, plus d'autres paramètres de mise en page liés au fait que le sous-menu est une sous-liste à puces du menu principal (sémantique web oblige :-). Difficile dans ses conditions d'établir une hauteur correcte de l'entête, pour qu'à la fois ses différents composants ne se chevauchent pas et que lui-même ne morde pas sur la boîte de rédaction en dessous.
Mais j'ai finalement réussi à mettre le doigt sur la solution, en jonglant avec différents paramètres de boîtes: la marge (margin), la marge interne (padding) et la hauteur en elle-même (height) et, grosso modo, en dispatchant d'un côté les mesures en pixels et de l'autre celles en em. Pas évident, mais le résultat est plutôt satisfaisant même s'il n'est pas parfait: la petite marge de 1 pixel entre le menu et le sous-menu disparaît tout de même quand on augmente la taille du texte.
A noter que la technique utilisée aggrave encore plus l'affichage du site sous Internet Explorer, à cause de la mauvaise gestion de la largeur des boîtes. Et comme je ne me suis pas encore attelé à la correction des bogues d'affichage d'[IE](Internet Explorer) (je ne suis même pas certain de le faire)...
Enfin, et c'est assez rare pour le signaler, le nouvel entête a mis en lumière un bogue d'affichage de Mozilla. Si, si, vous avez bien lu: Mozilla lui non plus n'est pas parfait. Mais comparé à celles du navigateur de Microsoft, cette erreur est bénigne.
Le bogue est décrit dans l'article Mozilla Shifting Gaps 'n Overlaps de Holly 'n John. Il apparaît lorsque l'on définit la hauteur de ligne d'une boîte en unités relatives (ici, en em), et que les boîtes qu'elle contient sont affichées en bloc. Des petits vides de 1 pixel peuvent alors s'insérer entre ces boîtes. Sur le site, c'est ce qui se passe pour le contenu du sous-menu déroulant des articles.
La solution consiste à ne pas définir de hauteur de boîte en unité relative. Malheureusement, j'en ai besoin, comme expliquer ci-dessus, pour contrôler la taille de l'entête. Encore du boulot en perspective pour corriger cela :-(.