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 adiv
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
Styling Links Inside a Div with a Specific Class
How to Style Nested Elements in React with Styled-Components
Twitter Bootstrap Thumbnail Caption to The Right
How to Select CSS Id's with Numbers in Them
Floated Image to Left of a Ul Is Ignoring Margin/Padding
How to Select a Radio Button in CSS
How to Make Cross Browser Gradient Mixin in Compass, with Ie9, Ie8, Ie7 and Opera
Using Bootstrap, How to Create Multiple Fullscreen Div's to Stack on One Another
How to Use Font-Family with Same Name
Difference Between Initial Containing Block and Viewport
CSS Terminology: What Are These Called
Efficient and Inefficient CSS Selectors (According to Google, Pagespeed ...)