Image de fond et bordure : décalage ou recouvrement ?

Bonjour à tous,

Voilà, je vous écris à propos d'un problème que je rencontre lors de la décoration de paragraphes. Voici le code incriminé :

p.paroles { 
	margin: 0; 
	padding: 20px 0 0 5px; 
	border-left: 5px solid #333333; 
	background: url(img.gif) no-repeat 0 0 ; 
	text-indent: 0;
}

Je cherche juste à mettre un bord de 5px à gauche et une image de fond en haut à gauche.

Le problème est qu'on observe une différence de comportement entre ie et tous les autres navigateurs. Les différents navigateurs "poussent" l'image de fond vers la droite lorsque le border de gauche augmente, alors qu'avec IE le bord recouvre de plus en plus l'image.

Si vous voulez un aperçu : h*tp://www.zone51.net/groupes/paroles-21-11-no-one-is-perfect---ray-of-light.html


Je pensais au début au border box model, mais comme la page en question est en mode "respect des standards", ça ne devrait pas venir de là.

Est-ce que j'ai loupé quelque chose ou alors c'est juste une différence de rendu entre les moteurs, et on ne peut rien y faire ?
Modifié par Matts (05 May 2006 - 19:59)

Ah tiens, c'est curieux.

Et avec des valeurs comme left top plutôt que 0 0, ça donne la même chose ?
Effectivement, j'avais également pensé au border box model, mais là ça n'a pas l'air d'être le cas.

Au fait, j'ai vu 8 paragraphes dans les paroles de la chanson, mais il n'y en a qu'un seul dans le code, c'est normal ?
Modifié par mpop (06 May 2006 - 01:00)

Oui, ça donne la même chose avec left et top, c'est d'ailleurs les valeurs que j'utilisais avant de me rendre compte de la différence de rendu...

Et pour les paragraphes, oui, c'est normal, j'englobe tout le texte en base par un paragraphe, en attendant de raffiner ça... Si quelqu'un a une fonction php rapide pour transformer les lignes vides en paragraphes, je prends !

Et pour revenir au bug, ça m'étonne de pas être tombé dessus plus tôt, tellement c'est gros !

Bon, bug testé en milieu minimal page vide avec un paragraphe. J'ai constaté le même bug (bien flagrant avec une bordure de 100px…). Par contre j'ai trouvé la "solution" : il faut doter l'élément de layout pour éviter ce phénomène.

p.paroles {zoom: 1;}

On peut aussi utiliser d'autres couples propriété/valeur en CSS pour conférer le layout à l'élément.
Cf http://www.test.blog-and-blues.org/haslayout/trad_temp.html#prop

Ok, merci beaucoup pour cette réponse !

Je ne connaissais pas du tout le concept d'hasLayout pour IE...

Comme suggéré, je n'ai pas utilisé la propriété zoom pour corriger le bug, afin de ne pas rendre mon code invalide, mais la propriété display:

p.paroles {display: inline-block;}

Celle-ci est valide et n'induit pas d'effets de bord puisque p est un élément de type block et que cette propriété n'a d'effet que sur les éléments Inline.

Merci beaucoup pour le coup de main !

Matts a écrit :
Comme suggéré, je n'ai pas utilisé la propriété zoom pour corriger le bug, afin de ne pas rendre mon code invalide

En même temps on s'en fout un peu de la validité. Les validateurs sont des outils qui permettent de repérer des erreurs dans le code. Si le validateur me dit « propriété non standard zoom » et que je sais très précisément ce qu'est cette propriété et dans quel but (et avec quels possibles effets pervers) elle est utilisée, ça ne me dérange pas le moins du monde.

Ensuite, si on est obligé de multiplié ces petits dérapages contrôlés, on peut aussi faire une feuille de style séparée contenant ces quelques petites modifications spéciales pour IE, liée via un commentaire conditionnel.
Modifié par mpop (06 May 2006 - 14:17)

Entièrement d’accord avec toi mpop, personnellement je préfère utiliser des propriété non standard avec un effet connu, plutôt que des propriété standard qui sont mal implanter comme inline-block qui risque de faire des sienne dans les évolutions des navigateurs.


A+