0

im having a issue with the css columns in IE, but it works fine in FireFox and Chrome.

In IE it makes it into one line all the way down the page

here is the code:

.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}

how do i fix it so its fine on IE aswell as other browsers?

Thanks for all the help i get.

Adam
  • 11
  • 1
  • 1
  • What version of IE are you using? – breezy May 10 '12 at 12:10
  • More info please, what version of IE? Can you also put together an example case on jsfiddle. – Undefined May 10 '12 at 12:10
  • IE8 below does not support CSS3 – breezy May 10 '12 at 12:10
  • "CSS 3" is not a technology that anything supports as a whole. It is only worth describing support for specific features. – Quentin May 10 '12 at 12:12
  • This is really old, but it should be observed that the OP only has the proprietary code for Mozilla and Webkit showing, so of course Internet Explorer wouldn't render the columns. One should always provide the properly-formed CSS at the end, after the proprietary stuff. Vis, column-count: 3; and column-gap: 20px – Tim Gallant Jan 17 '14 at 01:33

2 Answers2

3

Internet Explorer is not expected to support multiple column layout until version 10. It certainly shouldn't be expected to support the experimental versions of the properties flagged for testing in Mozilla and Webkit browsers.

You need to create a fallback design (or create a single design that doesn't use experimental features), or rearrange the content with JavaScript that measures the page, (actual, rendered) font size, etc.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

I found this on a related question that may be of use to you. its a plugin for jQuery that can make ie work for css3 columns.

http://welcome.totheinter.net/columnizer-jquery-plugin/

For the original question where i found this : How to display CSS3 columns on IE?

Community
  • 1
  • 1
Undefined
  • 11,234
  • 5
  • 37
  • 62