display: table-cell causing image to overflow its parent div IE11 only - html

Question

I'm displaying images of A4, A5, Quarto etc sized products in a responsive grid and and using max-width: 70%; (and other percent values) am able to take arbitrarily sized images and display them in correct scale. This is working well in about 10 browser/OS combos - except Win 10/IE11
Good display:
Here each cell in the grid (<div class="product">) has a black outline and contains an image wrapper in red (<div class='productimage'>) plus other wrapper divs the the text and price. Using a jquery solution here I have made all the grid cells the same height.
In IE11 the images seem to refuse to scale and want to render full size instead of a percent of their container's width:
Removing display: table-cell; from the .productimage class that wraps the image gives this on IE11:
So size is now correct again, but image is at top of the div. I tried this and similar solutions based on position: relative / position: absolute but cannot get it to work, as, I think, my divs do not have a fixed height, and/or height is set by jquery.
Codepen
http://codepen.io/anon/pen/ENNvbZ
function equalize() {
var $maxImgHeight = 0;
var $maxTxtHeight = 0;
$('.productrow .productimage').each(function(i) {
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i) {
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
displayWindowSize();
}
function equalizeOnResize() {
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin: 0px;
}
.centered_content {
max-width: 1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.quarto_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.pocket_diary_image {
max-width: 40%;
margin-left: auto;
margin-right: auto;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding: 10px 20px;
margin: 0px;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {
width: 50%;
}
.product:nth-child(2n+1) {
clear: left;
}
}
#media (min-width: 800px) and (max-width: 999px) {
.product {
width: 33.3%;
}
.product:nth-child(3n+1) {
clear: left;
}
}
#media (min-width: 1000px) {
.product {
width: 25%;
}
.product:nth-child(4n+1) {
clear: left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding: 4px;
}
/*
display: table-cell; seems to be causing IE problem, when removed
the image are displayed at the correct size and within the DIVs, but
not aligned to the bottom
*/
.productimage {
display: table-cell;
text-align: center;
vertical-align: bottom;
height: 100%;
outline: 1px dashed red;
}
.product_todetails {
outline: 0px solid black;
display: table;
width: 100%;
padding: 4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {
background-color: #444;
border: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->

Answer 1

You could use flexbox instead. More suitable for layout than display: table/table-cell
Note, you need to add prefixed flexbox property for amongst other IE10
Updated/Added CSS rules
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
Sample snippet
function equalize(){
var $maxImgHeight =0;
var $maxTxtHeight =0;
$('.productrow .productimage').each(function(i){
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i){
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
//displayWindowSize();
}
function equalizeOnResize (){
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin:0px;
}
.centered_content {
max-width:1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
}
.quarto_diary_image {
max-width: 100%;
}
.a5_diary_image {
max-width: 70%;
}
.a6_diary_image {
max-width: 50%;
}
.pocket_diary_image {
max-width: 40%;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding:10px 20px ;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {width: 50%;}
.product:nth-child(2n+1){
clear:left;
}
}
#media (min-width: 800px) and (max-width: 999px){
.product {width: 33.3%;}
.product:nth-child(3n+1){
clear:left;
}
}
#media (min-width: 1000px) {
.product {width: 25%;}
.product:nth-child(4n+1){
clear:left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding:4px;
}
/* ***************************************
used flexbox here instead of table-cell
*/
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
/* ***************************************
*/
.product_todetails {
outline: 0px solid black;
display:table;
width: 100%;
padding:4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {background-color: #444;border:black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default ">
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->

Answer 2

Tables are so problematic. The cells are forced to be at least as big as the contents, but if you use percentages in the contents then it's a circular definition.
So CSS2.1 left lots of these things as undefined behavior, and therefore browsers behave differently. Now CSS Tables Module 3 is attempting to fix this but it's not stable yet.
What usually works for me is:
Position the cells relatively
Position the contents absolutely
Use top, right, bottom and left to size and place the contents as desired inside the cell.