HTML/CSS – How to get a perfect size match between a contained resized-image and a parent container with Firefox and Internet Explorer?

Question

I have an issue with Firefox and IE in the code below : Everything is working extremely well with Chrome and Safari, but in Firefox and IE each image container does not respect the dimensions of its contained image. The image is resized proportionally with "height" command ; that does work. But IE and Firefox seem to take as a "width" value for the container of the image the original width of the jpeg file. How could we get a perfect result as in Chrome and Safari (with the contained image and its parent-container getting the same width and height each other) ?

Here is the HTML code :

<!-- Gallery -->
<div class="thegallery">
<div class="eachimage"><img src="images/image-1.jpg" /><div class="rollovertxt"><p>Caption</p></div><div class="rolloverbg"></div></div>
<div class="eachimage"><img src="images/image-2.jpg" /><div class="rollovertxt"><p>Caption</p></div><div class="rolloverbg"></div></div>
<div class="eachimage"><img src="images/image-3.jpg" /><div class="rollovertxt"><p>Caption</p></div><div class="rolloverbg"></div></div>
</div>

Here is the Css code :

.thegallery {
position:absolute;
top:6em; bottom:4em;
left:50%;
white-space:nowrap;
background-color:#36F;
z-index:1;
}

.eachimage {
position:relative;
height:100%; /* Full height of div.gallery */
display: inline-block;
margin-right:1em;
background-color:#63F;
}

.eachimage img {
height:100%; /* Full height of div.eachimage */
width:auto;
}

.eachimage:hover .rollovertxt { visibility:visible; }
.eachimage:hover .rolloverbg { visibility:visible; }

.rollovertxt {
position: absolute;
left:0.5em;
top:0.5em;
width:160px;
white-space:normal;
color:#FFF;
visibility:hidden;
z-index:3;
background-color:#F0F;
}

.rolloverbg {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
visibility:hidden;
z-index:2;
filter: alpha(opacity=50);
opacity: 0.5;
background-color:#000;  
}

Answer 1

Problem fixed. It seems the problem was coming from the fact Firefox and IE do not process correctly (as Chrome and Safari would do) a relative "height" of an element when you just give these two browsers an "em" top and bottom positioning of that element. I fixed the problem by adding a calc() function (height = 100% - ((top-position expressed in "em")+(bottom-position expressed in "em"))).