Welcome to my first query on this platform. Despite my efforts to search for a solution, I couldn't find an explanation as to why my code isn't functioning correctly in Internet Explorer (10+).
I have created three divs displayed as cells, each with a width of 100%. My intention was for all three to occupy the maximum possible width within their parent div displayed as a table (with a width of 100% of the body). While Firefox and Chrome render the layout as expected, IE behaves differently by setting all three divs as 100% wide.
Here is the code snippet:
HTML:
<div id="picture-holder">
<div class="each-picture" id="picture-red">
</div>
<div class="each-picture" id="picture-blue">
</div>
<div class="each-picture" id="picture-green">
</div>
</div>
CSS:
.each-picture{
display:table-cell;
height:100%;
width:100%;
overflow: hidden;
vertical-align:middle;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
-moz-transition:width 2s;
-webkit-transition: all .5s;
transition: width 0.5s;
}
#picture-red{
background-color:red;
}
#picture-blue{
background-color:blue;
}
#picture-green{
background-color:green;
}
This fiddle should provide more clarity: http://jsfiddle.net/AU4f5/
I appreciate any assistance and forgive any errors in spelling or grammar. I trust that this question aligns with the community guidelines.