Multi-column sous ie

Bonjour à tous,

J'ai un souci de positionnement multi-column sous ie. Les 3 colonnes se positionnent aléatoirement, quelle solution pour quelles soient correctement placées comme sous FF et Chrome ?

Le css correspondant au multi-column :

.multi-col{
	-moz-column-width:150px;
	-webkit-column-width:150px;
	-moz-column-gap:20px;
	-webkit-column-gap:20px;
	-moz-column-count:3;
	-webkit-column-count:3;
	-moz-column-rule:1px dashed #7FC6BD;
	-webkit-column-rule:1px dashed #7FC6BD;
}

#footersection1,
#footersection2,
#footersection3{
    color: #7FC6BD;
    display: inline-block;
    padding-left: 12%;
    text-align: center;
    vertical-align: bottom;
    width: 80%;
}

Merci pour votre aide toujours précieuse

Bonjour,

Columns est reconnu à partir de IE10.

En attentant tu peux utiliser ça pour voir : columnizer-jquery-plugin/

Merci rodolpheb pour cette réponse, je vais essayer de mettre en place ce plugin jquery et je donnerai le résultat ici dans un prochain post

Hello,

Sinon, il y en a un autre que tu peux trouver sur cette excellente page récapitulative : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Modifié par Raphael (06 Dec 2012 - 16:19)

Merci à vous rodolpheb et Raphael,

Grâce à cette aide je suis allé ici --> http://www.csscripting.com/css-multi-column/ et les 3 colonnes apparaissent bien sous ie et opera
Par contre je ne comprends pas pourquoi le column-rule lui n'apparait plus...

Les parties du code concernant le column-rule :

.multi-col{
	-moz-column-width:150px;
	-webkit-column-width:150px;
	-moz-column-gap:20px;
	-webkit-column-gap:20px;
	-moz-column-count:3;
	-webkit-column-count:3;
	-moz-column-rule:1px dashed #7FC6BD;
	-webkit-column-rule:1px dashed #7FC6BD;
}

 	// COLUMN PROCESSING 
	function processElements() {
		// wait for page to finish loading
		if(!documentReady) return;
		
		for(var i in pseudoCSSRules) {
			debug(i + ' cc:' + pseudoCSSRules[i]['column-count'] + ' cw:' + pseudoCSSRules[i]['column-width'] + ' cr:' + pseudoCSSRules[i]['column-rule'] + ' cg:' + pseudoCSSRules[i]['column-gap']);			
			var affectedElements = ut.cssQuery(i);			
			for(var j=0;j<affectedElements.length;j++) {
				//debug("affected element: " + affectedElements[j].tagName + ' [' + affectedElements[j].id + ' / ' + affectedElements[j].className + ']');																			 
				processElement(affectedElements[j], pseudoCSSRules[i]['column-count'], pseudoCSSRules[i]['column-width'], pseudoCSSRules[i]['column-gap'], pseudoCSSRules[i]['column-rule']);
			}
		}
	}
	
	function processElement(affectedElement, column_count, column_width, column_gap, column_rule ) {
		//affectedElement.style.visibility = 'hidden';
		var widthUnit;
		var width;
		var column_rule_width = 0;

		cc = new ut.getPseudoCssRules('column-rule',cssText);
		for(var i=0; cc && i<cc.cssRules.length;i++) {
			if(!pseudoCSSRules[cc.cssRules[i].selectorText]) 
				pseudoCSSRules[cc.cssRules[i].selectorText] = new Object();
			pseudoCSSRules[cc.cssRules[i].selectorText]['column-rule'] = cc.cssRules[i].value;
		}			
	}

Merci encore [/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par ThyBarth (06 Dec 2012 - 22:40)