[Résolu] Les images ne sont plus intégrées dans le texte sous IE7

Bonjour à tous,

Je viens de me rendre compte avec horreur que les images de mes articles ne sont plus intégrées dans le texte sous IE7. Elles sont situées sur une ligne seule et systématiquement à gauche. Comme si les balises FLOAT étaient ignorées dans la feuille de style.

Sous Firefox et IE6, tout était OK. Il s'agit d'un site réalisé sous spip. Je suppose qu'il s'agit d'un problème de CSS mais lequel ?

Voici le site en question : www.sentiers.be

Un grand merci d'avance
Modifié par Birdy (09 Dec 2006 - 20:58)

Bonjour - Hello ,
Chez moi pas de problème avec ie7. Ton décalage supposé est-il bien sur la page d'accueil ?

Non, après un petit survol, je me suis rendu compte que les images au format IMG dans spip, c'est à dire sans titres, ni descriptions visibles se comportaient normalement. Par contre, les images au format DOC, avec une description (la petite légende au bas de la photo) sont problématiques.

Exemple d'article avec IMG : http://www.sentiers.be/spip.php?article237
Tout semble OK

Exemple d'article avec DOC : http://www.sentiers.be/spip.php?article242
Et là...

Pour éclairer votre lanterne, voici le code CSS en question :

/* Images et documents */

img, .spip_logos { margin: 0; padding: 0; border: none; }

.spip_documents {}
span.spip_documents_center { display: block; margin-top:1em; }

.spip_doc_titre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #5B781B;
	text-align: center;
	line-height: 12px;
	padding-top: 5px;
	margin-left:auto;
	margin-right:auto;
}

.spip_doc_descriptif {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #5B781B;
	text-align: center;
	line-height: 12px;
	padding-top: 5px;
	margin-left:auto;
	margin-right:auto;
}

.spip_documents_right {
	margin-left: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	float: right;
}

.spip_documents_left {
	margin-right: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	float: left;
}

.spip_documents_center {
	margin-top: 10px;
	margin-bottom: 10px;
	clear: both;
	text-align: center;
}

.spip_logos {
	margin-left: 5px;
	border-width: 0px;
}

Salut,


Ben déjà ta page n'est pas valide :

résultat

Je ne sais pas si ça joue mais mais tu regardes, il y a des attributs qui ne correspondent pas au DOCTYPE


A toi de voir si tu veux refaire la mise-en-page pour qu'elle soit conforme, sémantique et accessible.

Oufti ! A voir ce lien, c'est le boxon dans mon code. Pourtant, c'est du code simplement généré par Dreamwaver. Allez comprendre...
Bref, je n'ai vraiment pas envie de changer tout pour l'instant, mais plutôt de résoudre mon problème IE7. Je ne peux pas envoyer ma lettre d'info tant que ce n'est pas résolu. D'autant plus, que tout fonctionne normalement à par cela...

Tiens, au fait, existe-t-il un petit logiciel qui réagencerait verticalement le code html de façon bien ordonnée ?
Modifié par Birdy (09 Dec 2006 - 12:29)

Birdy a écrit :
Oufti !

K'én affère à Lîdje hein?

Birdy a écrit :
A voir ce lien, c'est le boxon dans mon code. Pourtant, c'est du code simplement généré par Dreamwaver. Allez comprendre...
Bref, je n'ai vraiment pas envie de changer tout pour l'instant, mais plutôt de résoudre mon problème IE7. Je ne peux pas envoyer ma lettre d'info tant que ce n'est pas résolu. D'autant plus, que tout fonctionne normalement à par cela...

Tiens, au fait, existe-t-il un petit logiciel qui réagencerait verticalement le code html de façon bien ordonnée ?

Dreamweaver est loin d'être une référence avec sa mise en page en mode tableaux par défaut. Si tu es sous windows, tu dois avoir sur le CD d'installation macromedia homesite qui te permettra de nettoyer le code avec le module tidy. Ça sera déjà ça…
Modifié par Patidou (09 Dec 2006 - 14:01)

Merci pour le filon. Ca ne résoud toujours pas mon problème, mais dès que j'ai une minute de libre, je m'y colle.

Malgré les apparences, je ne suis pas d'Lîdge, mais je suis originaire de Charlerwè, la capitale wallonne des magouilles

Hourra ! J'ai trouvé. Il fallait remplacer

.spip_documents {}
span.spip_documents_center { display: block; margin-top:1em; }

par

.spip_documents { display: block; margin-top:1em; }

Tout simplement...

Ce n'était pas aussi simple, il y avait encore un problème : il faut supprimer

margin-left:auto; margin-right:auto;

et là, ça fonctionne vraiment.