28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de float dans IE 6!

Salut tout le monde,
mon premier post Smiley lol
J'espère que vous pourrez m'aider.

J'ai un petit problème ici:
Sur mon site, j'ai une div en float: right; dans mon texte qui contient une image.

Sur Firefox 2 / 3, le float laisse passer à gauche tout le texte.
Sur IE6, le float est à droite, comme Firefox, sauf que le texte ne passe pas à gauche comme il le devrait, le texte reste en dessous.

terrevivante.ca
J'ai une feuille de style faite spécialement pour IE6 (commentaire conditionnel). Vous la trouverez ici: CSS ie6
Ce qui est un commentaire à la fin est les règles déjà établies dans le style.css

Voici mon code xhtml de la partie consernée:


<div class="article">
	<img class="rond-haut_div-colonne_texte" src="images/rond-haut_div-colonne_texte.gif" alt="" />
	<!-- TEXTE -->
					
	<!-- TITRE DE L'ARTICLE: --><h2>Cultiver en protégeant l’environnement</h2>
							
	<!-- CHAPEAU: --><p class="chapeau">Le semis direct permet d’accroître la résistance des sols face aux agents de dégradation, tels l’érosion éolienne et hydrique, la compaction et l’acidification des sols, en leur assurant une meilleure santé. Ainsi ragaillardis, les sols n’en sont que plus productifs. </p>
							
	<!-- CORPS DE L'ARTICLE -->

	<div class="image_texte">
		<span class="galerie" onclick="Slimbox.open([[...]], 0)" title="Cultiver en protégeant l’environnement (Galerie)">
			<img src="images/articles/1.jpg"  alt="Labour | Semis-direct" title="Labour | Semis-direct" />
		</span>
		<p>Cliquez pour accéder à une galerie d'images.</p>
	</div>

	<p>Le semis direct reçoit de plus en plus d’attention. Cette attention contribue à son développement et augmente progressivement la proportion des superficies cultivées en semis direct au Québec. Cependant peu de consommateurs connaissent les bienfaits de cette pratique et il est actuellement difficile de valoriser les grains ainsi produits.</p>
							
	<p><a href="html/asd.html" title="Action Semis Direct">Action Semis Direct</a> préconise la mise en place d’une certification environnementale reliée au semis direct. Dans un avenir proche, nous sommes en droit d’espérer une valeur ajoutée aux productions. La reconnaissance d’actions environnementalement positives de la part des producteurs et productrices agricoles ne peut qu’être un heureux pas.</p>

							
	<p>Déjà un acheteur est intéressé par nos grains de blé. C’est un premier pas des plus prometteurs pour notre système de production.</p>
							
	<!-- FIN CORPS DE L'ARTICLE -->
	<!-- FIN TEXTE -->
	<img class="rond-bas_div-colonne_texte" src="images/rond-bas_div-colonne_texte.gif" alt="" />
</div>


Merci!
Modifié par KoopaTroopaRules (06 Aug 2008 - 04:27)
Hello KoopaTroopaRules et bienvenue, Smiley cligne

tu as affaire à l'un des bugs d'IE6 lié au haslayout et qui est décrit dans ce chapitre. C'est le fait d'avoir affecté un width: 90%; à tes paragraphes qui leur confère le layout et qui pose problème.

Cette déclaration est d'ailleurs inutile puisqu'il suffirait de remplacer le padding-top: 10px; par un padding: 10px 35px 0; par exemple (à adapter).

Lire également ce récent article qui parle des bugs les plus fréquents d'IE6.

En passant je suis arrivé sur ta page avec Javascript désactivé et l'image de gauche était invisible. Tu pourrais soit modifier ton JS pour modifier éventuellement le src d'une image par défaut déjà affichée, soit utiliser <noscript>, soit (encore mieux selon moi) faire ce randomize en PHP avec rand(0, 7);

A+
Modifié par Heyoan (06 Aug 2008 - 04:18)
Merci!

Tout fonctionne maintenant.
Tu m'as sauvé la vie Smiley langue
Je commençais à stresser, je ne trouvais pas de solutions. J'avais déjà cherché et je croyais que le problème de haslayout ne s'appliquait pas à mon problème!

Concernant le php, je n'y ai pas pensé. C'est un peu aussi parce que je ne sais pas encore comment le coder. Ça viendra bientôt, école et ambitions personnelles obligent Smiley langue
J'ai ajouté aussi l'image de base en <noscript>, merci de me le faire penser Smiley lol

Merci,
KoopaTroopaRules Smiley biggrin
Sujet clos
Aller à