how to make a responsive height for img in firefox (safari, chrome working) - media-queries

Question

I have a problem here
The problem area is two images on the right side of this website using max-height:50%; is not working in Firefox.
Open the page in Chrome or Safari and it works but then open it in Firefox and it does not work.
I have tried changing the div id=rightcontent to % width, but still not working.
#total #content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -108px; /* the bottom margin is the negative value of the footer's height
*/
}
#total #content #leftcontent {
position:relative;
width:60%;
padding-left:10%;
float:left;
}
#total #content #rightcontent {
position:relative;
max-width:237px;
float:right;
}
#total #content #rightcontent img {
position:relative;
max-height:50% !important;
float:right;
max-width:100% !important;
}
And HTML:
<div id="content">
<div id="leftcontent">
<h1>Kola <strong>STEVENS</strong> nejen prodáváme,<br/>ale hlavně na nich jezdíme.</h1>
<p></p>
</div>
<div id="rightcontent">
<div id="tst">
<img src="img/right1.png" />
<img src="img/right2.png" />
</div>
</div>
</div>

Answer 1

I found some similar questions like this one and I think it's a firefox way of handleing image sizes.
Your code is okay but if I was writing the code, I would use an image-wrapper for images to make it browsers cross-compatible. If you resize the page after loading in chrome you can see your images are no longer looking like before.
My solution (fiddle):
<div id="rightcontent">
<div id="tst">
<div class="image-holder">
<img src="img/right1.png" />
</div>
<div class="image-holder">
<img src="img/right2.png" />
</div>
</div>
</div>