ORdI&ORbI n'Web...

Accueil

Blog

Le bug de la double marge

Lors de la précédente mis à jour de ma feuille de style, dans IE6 PC mon site se présentait de la façon suivante :

La seule différence de structure avec ma feuille de style précédente était le passage de mes bords de mon contenu principal réalisés en "border" à "margin". ( Opération motivée par le fait que les borders posaient des problèmes d'accessibilité pour les gens surfant en noir & blanc, merci aux bonnes pratiques d'opquast qui m'ont fait découvrir ce problème ).

Donc j'avais :

#content {
 position:relative;
 float:left;
 width:459px;
 border-style:solid;
 border-width: 0 151px 0 150px;
 background-color:white;
 margin:0;
}

et je suis passé à :

#content {
 float:left;
 width:459px;
 border:0
 padding:0;
 margin: 0 151px 0 150px;
 background-color:white;
}

En examinant le rendu, on avait l'impression que le contenu principal gardait une bonne position centrée à l'écran mais que l'entête et le pied de page se décentraient. Je me demandais bien comment mon bloc "content" pouvait influencer la position de ces éléments. Un examen plus attentif montrait en fait que c'était les marges de mon contenu principal qui doublaient de tailles. Bon sang ! me dis-je, mais c'est bien sûr, c'est le fameux double margin bug, et je me précipite sur position is everything qui non seulement explique ce bug mais donne la solution pour le résoudre.

Le bug de la double marge se manifeste quand on met un bloc positionné en float dans un conteneur. Les marges de ce bloc apparaissent doublées.

La solution est très simple mais pour le moins inattendue, il suffit de rajouter un "display:inline;" dans le style du bloc, comme ceci :

content {
 display: inline;/* IE double margin fix.*/
 float:left;
 width:459px;
 border:0
 padding:0;
 margin: 0 151px 0 150px;
 background-color:white;
}

Le bien, c'est que les autres navigateurs conformes au standards devraient ignorer la valeur du display:inline, si on a un float:left. Donc pas besoin de cacher aux autres navigateurs ce truc. Autre bénéfice, cela résoud aussi un autre bug d'IE : le "text indent bug".

Merci donc à Steve Clason qui a découvert la solution et à Position is Eveything de l'avoir publiée.

Le choc des couleurs

Les menus de mon site sont passés d'une combinaison orange et mauve à du gris clair. Quel choc ! N'est-il pas ? Comment en suis-je arrivé là ?

Quand j'avais choisi l'orange et le mauve, je n'avais pas encore intégré le blog à mon site. Mon souhait d'alors était de bien marquer la différence entre les deux menus : le gauche pour l'informatique, et le droit pour le reste. Je n'avais pas envie de faire un site triste non plus, du coup j'y allais joyeusement et je choisissais des couleurs quasi complémentaires. Après avoir bien tâtonné je n'étais pas peu fier de l'harmonie de couleurs trouvée et du coté tape à l'oeil de mon site.

Mais peu à peu, je remarquais que les autres blogs étaient beaucoup plus sobres. Passer par exemple du Standblog à mon site causait un choc chromatique certain en ma défaveur (et j'arrête bien sûr là la comparaison de mon modeste blog à celui de Tristant Nitot).

Mais plus encore qu'une question de goût, mes couleurs ne s'harmonisaient plus du tout au contenu de mon site. Les grandes plages de couleurs orange et mauve de part et d'autre des articles en gênaient la lecture et n'étaient pas propice à la concentration. Quand il n'y avait encore principalement que mes liens favoris sur le site cela pouvait passer. L'importance que conféraient les plages de couleurs aux menus était justifiée par les faits que les textes étaient brefs à lire et que l'internaute devait avoir naturellement recourt aux menus. Mais pour le blog, les menus ne servent plus à rien, seul l'article est important.

Donc voilà, des menus sobres en gris s'imposaient pour le plus grand confort j'espère de mes lecteurs.

Bien sûr, je me rends compte que mon blog, fait encore "pièce rajoutée" dans mon site. Les menus du blogs ne devraient pas tous être rejetés en bas. J'ai encore du boulot.

Le design au service de l'utilisateur, c'est justement le thème d'un excellent article d'Adam Greenfield traduit sur pompage.net.

Menu du site

essai essai