Remettre son blog dans le droit chemin en 4 étapes.

Etape 1. Choisir le bon moment.

Pas la peine de vous lancer dans le diagnostic et la réparation dans l'urgence, au pire, si le bug rend la lecture de vos billets impossible, vous désactivez le thème et présenterez votre blog « tout nu » si vous n'avez pas le temps de vous en occuper tout de suite, vos lecteurs s'en remettront. Vous vous attelerez à la tâche quand vous vous sentirez l'esprit assez disponible pour être patient et ne pas essayer de résoudre le problème en deux coups de cuiller à pot et de rustines bas de gamme.

Etape 2. Valider son code.

On ne le répétera jamais assez, il est essentiel que votre code soit valide. Et ceci vaut quel que soit votre souci. Ici joue à plein l'effet battement d'aile du papillon. Une simple fermeture de balise oubliée ou incorrecte dans le coin le plus obscur de la page peut mettre à mal toute la mise en pages. Et lorsque vous appelerez à l'aide c'est la première chose qu'on vous demandera de faire. Avant de recoudre une plaie, on nettoie le champ opératoire, c'est une règle d'or. Il existe plusieurs outils en ligne, en particulier le validateur du W3C québécois, qui a le bon goût de s'exprimer en français.

Si l'une des erreurs signalées est pour vous incompréhensible, corrigez toutes celles que vous pouvez puis venez demander sur le forum, il y aura toujours quelqu'un pour prendre le temps de vous aider.

Etape 3. Circonscrire le problème.

Le code est valide, vous êtes d'un calme olympien. Mais ça ne va pas mieux. Tâchons alors de trouver la source du problème : le moteur ou la carosserie ? Autrement dit : le code de la page ou les css ? Il faut tester. Renommez provisoirement votre feuille de style en my-style.css et placez la feuille de style du thème Old à la place[1].

Dans le code xhtml/php

Si le problème persiste il y a de très fortes chances qu'il soit généré par vos personnalisations de code. Supprimez toutes vos personnalisations (ou placez-les en commentaire) dans les fichiers *.php et refaites-les (ou décommentez-les) une à une en testant chaque modification jusqu'à trouver la fautive.[2] Si vous avez installé un plugin, vérifiez à nouveau soigneusement que vous avez suivi les instructions d'installation de ce greffon.

Dans les css

Tout passe bien quand la feuille de style n'est pas la vôtre, c'est donc de ce côté que vous devrez porter votre attention. Quelques pistes peuvent toutefois vous guider : le souci apparaît-il avec tous les navigateurs (faites toujours les tests au moins avec Firefox ou Safari et Internet Explorer) ? Alors vous vous êtes trompés quelque part. Vous êtes probablement parti d'un thème existant et avez modifié cette feuille. Revenez au point de départ, recommencez vos personnalisations, testez à chaque étape. Le souci n'apparaît que sur l'un d'entre eux ? A coup sûr c'est que vous n'avez pas connaissance / n'avez pas tenu compte des différences d'interprétation entre eux.

La plus répandue : le calcul des dimensions des boîtes :

Si tous les navigateurs modernes prennent la déclaration de largeur comme une valeur globale à l'intérieur de laquelle se plaçeront les marges et les bordures, Internet Explorer prend cette largeur et place les marges et bordures à l'extérieur de celle-ci. Ainsi, pour un bloc déclaré avec width : 200px; margin-left : 30px; margin-right : 20px; border : 3px solid #ccc; les navigateurs modernes réserveront 200 pixels pour cette boîte et Internet Explorer 256 pixels (200 + 30 + 20 + 3 + 3). Si vous avez organisé votre mise en page sans laisser ces 256 pixels disponibles, la mise en page casse et le bloc « attend » d'avoir la place pour s'afficher. C'est typiquement le diagnostic à poser pour un menu qui se positionne en bas de la page au lieu de se placer à côté des billets.

Le contenu du blog

Le code est valide, la css est celle d'origine qui fonctionnait très bien sur le site de démo de son créateur et pourtant, rien ne va plus. Il faut alors chercher dans le contenu même de votre blog.

La superposition des blocs :

Autre grand tube des mises en page perturbées, les images trop grandes (ou autres éléments). Vous avez bien réglé toutes les dimensions dans votre feuille de style, mais vous avez placé dans un bloc un élément plus grand que son contenant. Là encore, le comportement variera selon le navigateur. Les navigateurs modernes feront se superposer les blocs tandis qu'une fois encore Internet Explorer agrandira la boîte-contenant et repoussera l'affichage du bloc concerné. Les plus répandues de ces insertions malheureuses sont d'une part les images, d'autre part les chaînes de caractères discontinues trop longues pour leur boîte d'accueil. Un moyen simple pour vérifier si votre souci concerne l'une de vos images : désactiver leur affichage dans votre navigateur et constater si le problème en est résolu. Si ça ne provient pas d'une image, cherchez si dans votre page il y a une citation de code avec une ligne longue, ou une url à rallonge. Assurez-vous que cet élément est à l'origine du pataquès en mettant provisoirement hors ligne le billet concerné.

Etape 4. Appeler à l'aide.

Le forum accueillera toutes vos questions n'ayant pu trouver leur solution avec les quelques pistes données ici. Commencez par utiliser le moteur de recherche interne du forum pour voir si la question n'a pas déjà été posée et résolue. Si ça n'est pas encore le cas, ouvrez un nouveau fil et aidez-nous à vous aider : lorsque vous viendrez sur le forum, pensez à formuler clairement quel souci vous préoccupe, indiquez l'adresse de votre blog (mieux : indiquez-la dans votre profil ou votre signature), si vous ne pouvez la donner, dites quel thème vous utilisez et faites une copie d'écran de la manifestation du problème que vous déposerez sur un serveur et dont vous donnerez le lien dans votre message. Et ainsi de tout renseignement qui vous semblera pouvoir aider. Il vaut mieux donner trop d'infos que pas assez !

Partagez

Le forum est un lieu d'entraide. Pour les recherches ultérieures, tâchez d'être « parlant » dans le titre de votre sujet. Quand vous aurez réglé le problème rencontré, rédigez un message dans le fil où vous avez posté votre question décrivant sa résolution. Cela pourra aider la prochaine personne qui rencontrera le même type de souci. Et venez y donner un petit coup de main de temps en temps ;)

Notes

[1] Je suggère celle-ci plutôt que celle par défaut, d'une part parce que celle par défaut requiert également layout.css, d'autre part parce que la flexibilité et la simplicité de Old écartera plus facilement des problèmes liés à la taille des blocs, j'y reviendrai.

[2] En principe, à ce moment-là, vous devriez aller chercher une poignée d'orties et vous flageller : on devrait systématiquement vérifier chaque modification dans divers navigateurs avant de procéder à la suivante...