Display: Table-Cell (Internet Explorer Issue)

[N1CK3RS0N]

I'm working on a semi-complex theme.

 

For the columns I find that using "Display: Table-Cell;" works better than "Float: Left;" because float doesn't account for borders and padding. You have to place another Div inside the column Div to and do padding on the inside one. Its a hassle. "Float: Left;" div's also don't expand with the other cells which are aligned horizontally with them, where as "Display: Table-Cell;" does.

 

In Fire Fox it works great, but in Internet Explorer there is major issues.

 

I attached a demo so you can see for yourself what the problem is. Basically it seems as though Internet Explorer is still treating the Div's as "Display: Block;" instead of  "Display: Table-Cell;".

 

Instead of aligning like this...

 

Left Column | Middle Column | Right Column

 

...it is displaying like this...

 

Left Column

Middle Column

Right Column

 

Any ideas or thoughts as to what causes this?

 

Thanks a million

 

[attachment deleted by admin]

[N1CK3RS0N]

According to W3C.

 

Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

 

Any other solutions you would think to work around this? Other than using a table.

[haku]

Unfortunately as you have discovered, IE doesn't recognize display table-cell or such.

 

float doesn't account for borders and padding. You have to place another Div inside the column Div to and do padding on the inside one. Its a hassle.

 

It's a hassle alright, but unfortunately this is currently the way to do what you want with cross-browser compatibility.

 

"Float: Left;" div's also don't expand with the other cells which are aligned horizontally with them, where as "Display: Table-Cell;" does.

 

The 'faux-columns' method is the way around this. There are also various javascript implementations that can do this as well.

 

It would be nice if IE played properly with the other browsers, but it's not very likely that it's going to happen any time.