[Résolu] Décalage de blockquote sous IE

Bonjour à toute la communauté,

Je vous fais part d’un petit problème d’affichage sur Internet Explorer qui traîne, depuis un certain temps déjà, dans ma boîte à problème CSS.

J’utilise une balise <blockquote> (par exemple) pour mettre en évidence un texte. Pour cette mise en évidence, j’ai choisi une barre verticale gauche plus large :

blockquote {
	margin: 1em .8em .5em; padding: .3em .5em;
	border-left: 6px solid #580A0A;
}

Sur Firefox, pas de problème, mais sous IE ; le texte qui suit se décale systématiquement vers la gauche. Et ça continue de se décaler si j’utilise de nouveau la balise blockquote.

Le plus surprenant, c’est que seul le texte se décale et pas la mise en page (bordures, etc.).

Exemple : http://www.ledruide.net/dotclear/?lais (à voir avec Internet Explorer)

Ce qui m’est venu à l’esprit pour l’instant c’est une série d’imbrication qui se passerait mal, mais ça ne semble pas être la cause du problème.

Après quelques essais, il semblerait qu’ajouter une largeur plus petite que 100% (width: 90%) règle le problème, mais je ne trouve pas que ça fasse une solution très propre.
Modifié par Janusz (30 Sep 2005 - 09:43)

Bonjour,

Cet amusant bug de haslayout d'IE 5.5 et 6.0 Windows n'est pas propre aux blockquote. Il se produira également avec des div :
- Il est causé par la combinaison padding-bottom et border-left (ou border-right) sur le conteneur (blockquote, div)
- il provoque l'extension vers la gauche ou vers la droite (selon la bordure) de la zone de contenu de l'élément suivant le conteneur, d'une valeur double de la bordure.
- les extensions se cumulent si plusieurs éléments conteneurs se suivent.
- Ces extensions sont indifférentes aux valeurs de marges et de padding du bloc conteneur initial (body, html)

Il est annulé par, au choix :
- la suppression du padding-bottom du conteneur
- la suppression de la border-left du conteneur
- une border-bottom sur le conteneur
- toute propriété conférant le layout au conteneur : height, width, position:absolute, zoom, etc.

Comme il n'affecte pas IE5.0 Windows, si on souhaite conserver le padding-bottom et la bordure du conteneur, la solution la plus appropriée est une feuille de style pour IE5.5 IE6.0 en commentaires conditionnels :

<!--[if lte IE 6]>
<style type="text/css">
<!-- 
blockquote {
zoom: 1;
}
-->
</style>
<![endif]-->

(Attention: le forum déforme la syntaxe de fermeture des commentaires conditionnels. Voir la FAQ du forum pour la syntaxe correcte)
Modifié par Laurent Denis (30 Sep 2005 - 05:37)

Ben voilà, c'est magique et ça marche.
J'ai récupéré l'adresse de la liste des bugs, ça pourra toujours servir pour plus tard.

Merci Laurent pour cette réponse rapide.


Remarque : Dis tu ne dors jamais (03h39 -> 05h37) ? Ou peut-être que tu es de l'autre continent.