19

IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?

tshepang
  • 12,111
  • 21
  • 91
  • 136
João
  • 635
  • 1
  • 10
  • 25
  • 1
    Your problem is that IE is a relative problem... Some versions support some things while others don't. And there's such a wide assortment of versions out there... some people are still using 6! However 9 probably will have support for CSS3 though I haven't looked into it because I don't do web development right now and I don't use IE. But your question is a little confusing in that you said you want to support IE but don't want to tweak your css for IE... You can't support IE with out tweaking... – Kenneth Mar 17 '11 at 20:17
  • 2
    I said I didn't want to code different CSS for IE. And I was really looking forward for a JavaScript compatibility library or something like that, but well.. let's tweak, then. – João Mar 17 '11 at 20:43
  • 1
    If you don't want to write different CSS for IE, then don't support IE. – DA. Mar 18 '11 at 05:05
  • 1
    IE9 does not have CSS3 column support (isn't that awesome?). So you have to use a polyfill or add extra CSS hooks to make it look good in IE. Good luck dropping IE altogether if you work on any sizable public-facing website. Sad, but true. – Marcy Sutton May 07 '12 at 23:48

4 Answers4

17

As of IE10, there is now native (and un-prefixed) support for CSS3 columns.

http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx

Jim Arment
  • 338
  • 2
  • 9
13

Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.

pdr
  • 6,372
  • 1
  • 29
  • 38
  • The pragprog offers the columns chapter for free http://media.pragprog.com/titles/bhh52e/multicolumn.pdf – dinnouti Apr 29 '14 at 21:02
1

Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.

For IE only:

<!--[if IE]>
   **** your styles ****    
<![endif]-->

You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.

Tyanna
  • 719
  • 6
  • 11
1

Try setting display: inline-table; on the items you want laid out as a table

sra
  • 23,820
  • 7
  • 55
  • 89
ChristineC
  • 11
  • 1