html - display: table-cell causing image to overflow its parent div IE11 only -
i'm displaying images of a4, a5, quarto etc sized products in responsive grid , and using max-width: 70%; (and other percent values) able take arbitrarily sized images , display them in correct scale. working in 10 browser/os combos - except win 10/ie11
good display:
here each cell in grid (<div class="product">) has black outline , contains image wrapper in red (<div class='productimage'>) plus other wrapper divs the text , price. using jquery solution here have made grid cells same height.
in ie11 images seem refuse scale , want render full size instead of percent of container's width:
removing display: table-cell; .productimage class wraps image gives on ie11:
so size correct again, image @ top of div. tried this , similar solutions based on position: relative / position: absolute cannot work, as, think, divs not have fixed height, and/or height set 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 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 product categories - show 1,2,3 or 4 products per row depending on screen size. first .product mobile - rest need have clear inserted start of each new row boxes line 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) , (max-width: 799px) { .product { width: 50%; } .product:nth-child(2n+1) { clear: left; } } @media (min-width: 800px) , (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 causing ie problem, when removed image displayed @ correct size , within divs, not aligned 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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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 - can go onto several lines , other divs line up</a> </div> <div class='product_todetails'> <div class='productprice'> €10.00 </div> <div class='productmoredetails'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </div> </div> </div> </div> <!-- / nth-child wrapper --> </div> <!-- / panel-body --> </div> <!-- / panel -->
you use flexbox instead. more suitable layout display: table/table-cell
note, need add prefixed flexbox property amongst other ie10
updated/added css rules
.productimage { display: flex; flex-direction: column; text-align: center; height: 100%; outline : 1px dashed red; } .productimage { 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 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 product categories - show 1,2,3 or 4 products per row depending on screen size. first .product mobile - rest need have clear inserted start of each new row boxes line evenly */ .product { background-color: white; padding:10px 20px ; float: left; width: 100%; outline: 1px dashed black; margin-bottom: 20px; } @media (min-width: 500px) , (max-width: 799px) { .product {width: 50%;} .product:nth-child(2n+1){ clear:left; } } @media (min-width: 800px) , (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 { 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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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 - can go onto several lines , other divs line up</a> </div> <div class='product_todetails'> <div class='productprice'> €10.00 </div> <div class='productmoredetails'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </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'> <a href='#' class="btn btn-sm btn-primary">more info / buy</a> </div> </div> </div> </div> <!-- / nth-child wrapper --> </div> <!-- / panel-body --> </div> <!-- / panel -->
Comments
Post a Comment