Probléme de layout ie

Bonjour, j'ai un problème de layout avec ie qui vient de resurgir du passé (cf ce topic).

En effet, le block où figure mon contenu se positionne mal avec ie, mais cela ne se produit qu'avec l'ajout d'une nouvelle page de contenu utilisant un div un peu spécial genre "citation":

voici l'url de la page: http://beta.finalclap.com/bugie.html
et le css: http://beta.finalclap.com/css6.css

Apparement, c'est un probléme de layout, quand j'enléve le style="margin:0px 50px; background-color:#CCCCCC; font-style:italic; font-weight:lighter; padding:10px; border:1px solid black;" le probléme disparaît.

Comment faire ?
Merci
Modifié par Galdon (11 Jan 2008 - 00:31)

Bonjour,

Galdon a écrit :
Apparement, c'est un probléme de layout, quand j'enléve le style="margin:0px 50px; background-color:#CCCCCC; font-style:italic; font-weight:lighter; padding:10px; border:1px solid black;" le probléme disparaît.

Relire la traduction par Laurent Denis de l'article «On Having Layout», ou bien relire l'item de la FAQ sur le HasLayout. Aucune de ces propriétés ne confère le layout à un élément.

Par contre, dans ce que tu supprimes il y a:

font-style: italic;

Ce qui renvoie au bug suivant d'IE6:
http://www.positioniseverything.net/explorer/italicbug-ie.html

Le correctif consiste à utiliser le HasLayout pour contenir cet effet. (Voir la FAQ à propos de l'utilisation du HasLayout pour corriger des bugs...)
Modifié par Florent V. (11 Jan 2008 - 11:13)

Merci pour la réponse.
D'après ce que j'ai compris, il faut que je dote mon <div style="margin:0px 50px; background-color:#CCCCCC; font-style:italic; font-weight:lighter; padding:10px; border:1px solid black;"> d'un layout.

Pour cela, il faut que j'utilise un de ces propriétés:
width:100%
height:1%
zoom: 1

qui va conférer à mon div le layout dont il a besoin, le tout dans des commentaires conditionnels pour ne pas géner les autres navigateurs.

J'ai essayé chacune de ces propriétés, mais aucune ne fonctionne, j'ai dû mal comprendre...

Autant pour moi, il faut utiliser le HasLayout conjointement avec un overflow: visible (alors même que "visible" est déjà la valeur par défaut... faut pas chercher à comprendre...).

Donc:

div.machin {
	height: 1%;
	overflow: visible;
	margin: 0 50px;
	padding: 10px;
	border: 1px solid black;
	background: #ccc;
	font-style: italic;
	font-weight: lighter;
}

Merci infiniment, ca marche !
A bientôt sans doute pour un prochain bug d'interprétation du css par ie ...