Dans cette page, je relate les quelques problèmes de CSS que j'ai rencontrés et que j'ai dû résoudre. Cette page est en développement et sera mise à jour à chaque nouveau problème trouvé.

Adaptation à HTML5

Avec l'arrivée de HTML5 et son adoption dans ce site, je me suis retrouvé avec quelques problèmes que j'ai dû résoudre.

Attribut "align" des tables

Jusqu'à l'adoption de HTML5 sur ce site, j'utilisais l'attribut

align="center";

ou

align="right";

pour aligner individuellement les tables qui s'affichaient sur le site.

Avec HTML5, je n'ai pas vu de différence pour l'alignement à droite mais toutes les tables où j'utilisais l'alignement au centre se sont retrouvées à leur position par défaut, à gauche. La raison est que ce type d'alignement n'est plus reconnu sur HTML5. Je devais trouver une façon de contourner ce problème.

Après de longues recherches sur le Web, j'ai trouvé une solution tout au moins temporaire pour recentrer les tables que je voulais voir afficher au centre: l'utilisation de

style="margin: 0 auto;"

pour chaque table que je veux voir centrée fonctionne très bien.

Attributs "cellspacing"

Je sais que je peux encore utiliser l'attribut cellspacing sous HTML5 mais, cette fois-ci, je veux utiliser CSS car je veux que l'espace entre les cellules soit réellement 0 sur toutes les balises <table> de classe "tab".

J'ai trouvé ma réponse sur Stackoverflow:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Débordements de contenu

N'ayant pas relu le code du fichier print.css depuis assez longtemps, j'ai regardé à quoi ressemblaient les impressions des pages de mon site. Polices trop grosses: j'ai réduit de 15pt à 11pt. Mettre à jour avec des instructions CSS pour les nouveaux objets: j'ai transféré les instructions CSS nécessaires de layout.css vers print.css. Puis soudain, je vois: le contenu des "listings", les <pre><code> déversaient leur contenu, débordaient. Il fallait que je trouve un moyen d'empêcher cela, peut-être même de faire des retours à la ligne lorsque nécessaire.

J'ai cherché et j'ai pu essayer quelques suggestions faites en "googlant" mais sans succès. J'ai finalement trouvé une solution sur le site Make “Pre” Text Wrap qui ressemble à ceci:

/* Browser specific (not valid) styles to make preformatted text wrap */		

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Sur le site, on dit que ce n'est pas la solution finale mais elle fonctionne bien presque partout. C'est la solution que j'ai. Je la garde et je passe à autre chose.

Pour que cette solution fonctionne bien, j'ai dû modifier un peu les instruction CSS affectant la balise <pre>: j'ai supprimé de print.css l'instruction "max-length:150px;" qui limitait l'étendu deu listing.