Edit : Colonnes incompatibles avec Internet Explorer

Bonjour,

Le site en question possède des pages avec 3 colonnes et 2 colonnes.
Les 3 colonnes fonctionnent parfaitement bien sur Chrome et Firefox tandis que les 2 colonnes fonctionnent sur Chrome mais se superposent et occupent toute la largeur de la page sur Firefox.

Je n'arrive vraiment pas à comprendre comment ma class col3 avec un width d'un tiers fonctionne sur les deux navigateur et ma class col2 avec un width de moitié ne fonctionne pas sur Firefox alors qu'elle repose sur le même principe que ma class col3

J'ai du ajouter une div autour de mes colonnes avec une nouvelle class, et en css j'ai mis -moz-column-count: 2;
Et là ça fonctionne, sauf pour une page où deux colonnes prennent la forme de 50% mais se superposent toujours tandis que sur une autre pages les colonnes aux mêmes propriétés css se placent bien.

Avez-vous une idée de ce que ça peut être ?

Merci d'avance.

Edit : Internet Explorer ne semble pas apprécier mes colonnes non plus. Les 3 colonnes passent bien mais pas les 2 colonnes.
Modifié par Sulivent (12 Nov 2014 - 23:26)

Bonjour Sulivent,

A priori tu dois avoir une propriété Css qui entre en conflit avec l'idée qu tu te fais de ton tableau.

Mais impossible de l'affirmer en l'état. Même si ta description est très détaillée, il manque le code référent, soit Html et Css afin de pouvoir étudier la question sérieusement.

Il existe aussi un outil en ligne formidable pour ce genre de situation, tu devrais faire une visite sur JSFiddle.

A bientôt.

Merci de ta réponse Greg_Lumiere,

ça m'étonne qu'une propriété css entre en conflit, puisque les colonnes de deux pages différentes ont les mêmes propriétés mais n'affichent finalement pas le même rendu.

D'ailleurs j'ai aussi ces problèmes sur Internet Explorer. Je développe vraiment en amateur et peut-être dois-je ajouter un script pour la compatibilité.

La page où les deux colonnes s'affichent correctement en ayant ajouté class="col6moz" :

<section class="row-fluid single_post">
	<div>
	        <h4>Des compétences en référencement et une maîtrise des outils d’édition</h4>
	         <h5>Des connaissances essentielles pour assurer un bon positionnement à vos contenus     
                 web</h5>
		<h5>et séduire les internautes. </h5>
	</div>
	<div class="col6moz">
		<div class="col6 bkg-jaune margin-right expertise5">
			<p>Formée aux principes du référencement naturel, je propose des contenus optimisés 
                       SEO qui vous permettent d’<strong>améliorer votre positionnement dans les SERP</strong>    
                       (pages de résultats des moteurs de recherche).</p>
			<p>Un contenu bien organisé avec une densité de mot clé bien dosée, des liens 
                       stratégiques...<strong>fait réellement la différence !</strong></p>
		</div>
		<div class="col6 bkg-jaune margin-left expertise6">
			<p> Mes connaissances en <strong>HTML5</strong> me permettent d’intervenir 
                        directement sur les <strong>CMS</strong> (WordPress, Joomla et Drupal….) et de vous 
                        livrer des textes en format HTML si vous le souhaitez.</p>
			<p>J’utilise également des <strong>outils d'édition</strong> comme Storify, Infogr.am, 
                        Batchgeo, Timeline...</p>
		</div>
			</div>
			</section>
			<section class="row-fluid single_post" id="">

Et celle où la même classe ne règle pas le problème :

<section class="row-fluid single_post" id="">
	<div>
		<h4>Le contenu est l'ingrédient clé de tout site internet</h4>
		<h5>L'utilité et la richesse d'un site internet dépendent avant tout de son contenu.</h5>
		<h5>Chaque détenteur d'un site doit ainsi se préoccuper en amont et avec soin de la teneur de ses textes.</h5>
	</div>
	<div class="col6moz">
	<div class="col6 bkg-jaune pour-tous margin-right">
		<p>Impossible de faire l’impasse sur la qualité de ses contenus et de proposer des "coquilles vides" à ses internautes ! Véritable <strong>vecteur de trafic, de visibilité et de fidélisation de votre cible</strong>, votre texte ne doit pas être négligé.
		<p>Mes services s'adressent ainsi aussi bien aux agences, qu'aux entreprises, aux associations, aux particuliers
					ou encore aux start-ups.</p>
		<p><strong>Tous les secteurs d’activités sont également concernés</strong>. Chacun a ses enjeux, ses contraintes et c’est ce qui fait, entre autres, l’intérêt du métier de rédacteur.</p>
	</div>
	<div class="col6 bkg-jaune margin-left">
		<p>J’aime accompagner le <strong>lancement de projets d’entrepreneurs</strong> qui nécessitent de se faire vite apprécier des moteurs de recherche !</p>
		<p>La création de contenus optimisés intervient trop souvent à la fin, alors qu’idéalement cette étape devrait être réalisée au préalable pour <strong>permettre à votre site d’être bien visible dès sa mise en ligne et de se démarquer de la concurrence.</strong></p>
		<p>N’hésitez pas à me contacter si vous souhaitez avoir plus de renseignements sur ces sujets.</p>
	</div>
	</div>
</section>

Les css :

.col6 {
	width: 48.9%%; 
	float: left;
	margin-top: 20px;
	padding: 10px 0;
}

.col6moz {
	-moz-column-count: 2;
}

.margin-right {
	margin-right: 10px;
}
.margin-left {	
	margin-left: 10px;
}

.pour-tous {
height: 210px;
}

Je suis vraiment perdu.

j'ai oublié ces css sur la première page :

.expertise5 {
	height:133px;
}
.expertise6 {
	margin-bottom: 20px;
}

Ton Css est correct !

Par contre c'est ton Html qui pèche. Dans la seconde feuille tu as une balise P qui n'est pas refermée et tu n'as pas le conteneur DIV de classe clo6moz.

Sur JsFiddle ça fonctionne avec ces modifs.

Merci pour la balise <p> elle m'avait échappé.

Par contre j'ai bien mon conteneur <div class="col6moz">. Je n'en ai qu'une seul qui contient les deux <div class="col6 bkg-jaune margin-right expertise5">

Entre temps j'ai ajouté dans mon css

.col6 {
	-moz-column-width: 470px;
}

Et là ça fonctionne bien. Le width en pourcentage du .col6 ne fonctionne pas avec Firefox du coup je l'ai redéfini ici pour ce navigateur. Ce qui est étonnant c'est que les pourcentage sur les .col4 ne lui poset aucun problème.

Par contre Internet Explorer reste buggué. Y a t-il un code particulier comme le -moz- pour Firefox ?
Dois-je ajouter dans ma feuille de styles quelque chose comme ça ? :

<!--[if gte IE 6]>
<style type="text/css">
.col6 {
    width: 48.9%;
}
</style>
<![endif]-->

Modifié par Sulivent (12 Nov 2014 - 21:19)

Je poste un nouveau message pour indiquer que le site répond bien sur Firefox mais buggue complètement sur Internet Explorer.

Toutes mes colonnes ne répondent pas correctement.

Ai-je oublié de déclarer quelque chose pour ce navigateur ?

Sulivent a écrit :
Par contre j'ai bien mon conteneur &lt;div class=&quot;col6moz&quot;&gt;

Autant pour moi je ne l'avais pas vu et l'avais rajouté au dessus du second bloc DIV.

Par contre je suis un peu perdu là dans ton code. Pourrais-tu, s'il te plaît, copier les codes html et css sur une page JsFiddle (ou Codepen) puis partager le lien ?

Au fait, as-tu consulté le tutoriel Alsa Les Multi-Colonnes en CSS3 ? Y'a peut-être un truc qui nous a échappé...
Modifié par Greg_Lumiere (13 Nov 2014 - 17:31)

Je viens de voir ceci aussi :

Suliven a écrit :
.col6 {
width: 48.9%%; // Un seul signe % devrait suffire...
float: left;
margin-top: 20px;
padding: 10px 0;
}

L'as-tu corrigée ?
Modifié par Greg_Lumiere (13 Nov 2014 - 17:46)