Firefox and IE border-box not working properly? - html

Question

So I have been trying to figure this out for a day or so without any luck, and figured I would turn to the CSS masters of the universe here.
Anyway, in Chrome my page looks fine (like always), but Firefox and IE both seem to have issues w/resizing images. I basically have 2 parts, a 'left div' and a 'right div', and the on the left just has right-padding to make it be the entire width, minus the width of the 'right div'.
Inside 'left div', there is an image who's size is set to be 100% of the width and height of the containing element, which in Chrome, works out wonderfully, and leaves the image in the center and looking good. FF and IE don't resize it at all, and worse, they don't respect the padding set on 'left div' so it looks even more weird.
The simplified HTML:
<div>
<div class="dialog-bg"></div>
<div id="view-larger-dialog" class="mc_report_dialog dialog-container">
<div class="details-container staticimage">
<span id="openPostModal">
<span class="modal-body cardDetails">
<div class="closeOpenModal">×</div>
<div class="cardContent">
<div class="cardBody">
<div id="card-content" class="card-content-staticimage">
<span class="image">
<img class="annotatable" src="https://s-media-cache-ak0.pinimg.com/originals/5a/28/22/5a282241e64e41d605384bb261ea581f.jpg">
</span>
</div>
</div>
</div>
</span>
</span>
<span class="detailBox">
<div class="cardContent cardDetails">
<div class="content">
<p>
blank white space
</p>
</div>
</div>
</span>
</div>
</div>
</div>
The CSS:
.dialog-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.6;
z-index: 1001;
}
.mc_report_dialog .details-container {
padding: 0px;
}
span#openPostModal {
position: fixed;
top: 0;
left: 0;
height: 800px;
margin-top: 0px;
margin-left: 0px;
display: table;
z-index: 5000;
height: 100%;
background: none;
width: 100%;
box-sizing: border-box;
padding-right: 24rem;
border: none;
}
span.detailBox, span.shareNewBox {
width: 24rem;
height: 100%;
padding: 0;
position: fixed;
top: 0px;
right: 0px;
background-color: white;
z-index: 5005;
}
span#openPostModal .modal-body {
border: 0px solid #ffffff;
padding: .6rem 1rem;
display: table-cell;
vertical-align: middle;
width: 100%;
max-height: 50%;
background: none;
overflow-y: visible;
}
.closeOpenModal {
font-size: 2rem;
color: #fff;
float: right;
position: absolute;
right: 1rem;
top: 1rem;
font-weight: 700;
cursor: pointer;
padding-right: 24rem;
opacity: 0.8;
}
span#openPostModal .cardContent {
background: none;
border: none;
position: relative;
width: 90%;
margin: auto;
}
span#openPostModal .cardContent .cardBody {
padding: 0;
}
span#openPostModal .cardContent .cardBody #card-content {
height: 100%;
padding: 0;
}
#card-content.card-content-staticimage .image {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
#card-content.card-content-staticimage .image img {
max-height: 100%;
max-width: 100%;
}
You can see the result of that here on my jsFiddle
Any help would be greatly appeciated.

Answer 1

Apparently the whole display: table; and display: table-cell were messing it up. Just changing those to display as block worked. Sorry for the question.

Answer 2

Your problem isn't box-sizing:border-box, it's display:table.
Just add table-layout:fixed; right after the display:table declaration and you should be ok.