Display:Table-Cell Not Working in Ie9

display:table & display:table-cell not working in IE9

The problem is that IE doesn't render the page as it's latest version, adding a X-UA-Compatible meta tag lets us to choose which version of IE should render the page, setting it to the latest (edge) version solves the problem:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Display:table-cell not working in IE9?

I found the answer from an old thread, where @thirtydot wrote

I applied float: left to stuff. It kinda works.

How can I make "display: block" work on a <td> in IE?

As he said, it kinda works... IE9 stops rendering stuff all crazy, but there's still som aligning to do to make it look good.
But that answer is good enough, I can fix the rest myself...

display:table-cell not working in IE11 only

I could solve the issue here. IE 11 renders actual width of images like "Hebert-Logo.png" - which has 1800px width. This was the issue here. I just added following css and it was working for me:

.img-responsive {width: 100%;}

Working version: https://jsfiddle.net//vybgc7rv/

IE9 not rendering [display: table] CSS correctly?

I found that by adding the following, everything was rendering as I desired in IE, as well as Chrome and Firefox:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge runs the page in the most up to date version of IE available.

How can I make this CSS layout work in IE9 / 10?

You probably cannot do it with CSS alone (for IE9/IE10), so I wrote a fix myself In JavaScript.

CSS:

.dtable{
display:table;
height:100%;
width:100%;
}

.dtable-row{
display:table-row;
}
.dtable-row.fill{
height:100%;
}

.dtable-cell{
display:table-cell;
vertical-align:top;
height:100%;
}
.dtable-cell.fill{
width:100%;
}

.relative-fill{
position:relative;
width:100%;
height:100%;
}

.absolute-fill{
position:absolute;
height:100%;
width:100%;
overflow:auto;
}

JS:

// fix table based layout for IE9 / IE10 with class=
// dtable, dtable-row, dtable-cell, absolute-fill, relative-fil
var table_layout = {
// set support to 0 and fix height when doesn't extend to parent height
setSupport0fixHeight: function(obj){
for(var i=0, len=obj.elements.length; i<len; i++){
var elem = $( obj.elements[i] );
if( elem.height() < elem.parent().height() ){
obj.support = 0;
break;
}
}
},

// dtable fill object
tableFill: { elements:[], support:1 },
// relative fill object
relativeFill: { elements:[], support:1 },

// load this function when you want to initialise the object
// You can use this function with a element array to exclude those elements
// from the elements array that gets fixed
init: function(){
if(arguments.length > 0){
this.update(arguments[0]);
} else {
this.update();
}
this.setSupport0fixHeight(this.relativeFill);
this.setSupport0fixHeight(this.tableFill);
this.fixTableBasedLayoutHeight();
},

// this updates the elements which need to be fixed
// hass support for exclode elements array
update: function(){
this.tableFill.elements = $(".dtable");
this.relativeFill.elements = $(".relative-fill");

if(arguments.length > 0){ // exclude elements
this.tableFill.elements = $( $(this.tableFill.elements).not(arguments[0]).get() );
this.relativeFill.elements = $( $(this.relativeFill.elements).not(arguments[0]).get() );
}

},

// you first need to hide all elements to avoid some bug
fixTableBasedLayoutHeight: function(){
var fixHeightShow = function(obj){
// loop throught elements of obj, set height to parent hide and show elem
for(var i=0, len = obj.elements.length; i < len; i++){
var elem = $(obj.elements[i]);
elem.height(elem.parent().height());
elem.show();
}
}

// first hide all elements
if(!this.tableFill.support){ this.tableFill.elements.hide() }
if(!this.relativeFill.support){ this.relativeFill.elements.hide() }

// fix height and show elements
if(!this.tableFill.support){ fixHeightShow(this.tableFill) }
if(!this.relativeFill.support){ fixHeightShow(this.relativeFill) }
},

// duplicates height of all
// sub elements with class dtable / relative-fill in sourceElem to
// all elements in destElemArr
// expects 2 jQuery object arrays.
duplicateStyle:function(sourceElem, destElemArr){
// element itself
// check is element itself dtable or relative-fill in classlist sourceElem[0]
// set height to sourceElem height
if(this.tableFill.support == 0){
if(sourceElem[0].className.match(/dtable|relative-fill/)){
destElemArr.height(sourceElem.height());
}

// search for class relative-fill in source elem
var classArr = [".dtable", ".relative-fill"];

for(var classname = 0; classname<classArr.length; classname++){
var sourceClassElemArr = sourceElem.find(classArr[classname]);
if(sourceClassElemArr.length > 0){ // relative fill found
for(var i=0, len=destElemArr.length; i<len; i++){ // loop through all source elem children
var destClassElemArr = $(destElemArr[i]).find(classArr[classname]); // get relative fill array from dest array
for(var j=0, len2=destClassElemArr.length; j<len2; j++){ // loop through all relative fill dest array
var sourceElem2 = $(sourceClassElemArr[j]);
var destElem2 = $(destClassElemArr[j]);

destElem2.height( sourceElem2.height() ); // set relative fill height from dest to source height
}
}
}
}
}
}
}

display:table-cell not working on button element

The problem is that the <button> element cannot accept changes to the display property.

Certain HTML elements, by design, do not accept display changes. Three of these elements are:

  • <button>
  • <fieldset>
  • <legend>

The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.

However, there is an easy workaround in this case:

Solution 1: Wrap each <button> in a div element.

OR

Solution 2: Use another element to submit the form data.

Note that some browser versions may actually accept a display change on a <button>. However, the solutions above are reliable cross-browser.

References:

  • Bug 984869 - display: flex doesn't work for button elements
  • Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context


Related Topics



Leave a reply



Submit