Mozilla not resizing images within a predefined div

Mozilla not resizing images within a predefined div

This is my first question and I have looked for an answer but can't see
anything that has worked, and I have tried a bunch of things already.
We have a huge site that is broken down into a few sections on the home
page. The section that is causing issues it two divs, each 45.5% of the
1100px. Within each of these are two more divs, each again 45.5% of the
half. We are pulling information from another section of the site using a
JSON object to show the latest 2 news articles and 2 latest reviews. The
object is using all the styling I have set up already.
Part of the JSON is the image that gets pulled from the news and reviews.
I have used the following CSS to make sure the image is max 160px in
height. All browsers are working fine, but Mozilla is not scaling the
images to fit the max width and there is huge overflow. The image is the
set height but it scales the width to that and not to the max-width of
200px.
The CSS is:
.review-img {
height: 160px;
width: 200px
display: table-cell;
vertical-align: middle;
}
.review-img img {
max-height: 100%;
max-width: 100%;
}
.news-img {
height: 160px;
width: 200px;
display: table-cell;
vertical-align: middle;
}
.news-img img {
max-height: 100%;
max-width: 100%;
}
and the JSON for the news is:
var json_obj = $.parseJSON(headline);//parse JSON
console.log(json_obj);
var output = '';
output+="<div class='one-half'>";
output+="<div class='news-img'><img alt=''
src='http://dealer.mustek.co.za/" + json_obj[0].image
+"'/></div>";
output+="<p><a
href='http://dealer.mustek.co.za/view-article.html?p="+
json_obj[0].page_id +"'>" + json_obj[0].article_title +
"</a><br>" + json_obj[0].article + "</p>";
output+="<a
href='http://dealer.mustek.co.za/view-article.html?p="+
json_obj[0].page_id +"'>Read more</a>";
output+="</div>";
output+="<div class='one-half'>";
output+="<div class='news-img'><img alt=''
src='http://dealer.mustek.co.za/" + json_obj[1].image
+"'/></div>";
output+="<p><a
href='http://dealer.mustek.co.za/view-article.html?p="+
json_obj[1].page_id +"'>" + json_obj[1].article_title +
"</a><br>" + json_obj[1].article + "</p>";
output+="<a
href='http://dealer.mustek.co.za/view-article.html?p="+
json_obj[1].page_id +"'>Read more</a>";
output+="</div>";
$('#newsfeed').html(output);
The reviews is exactly the same.
The HTML is:
<section class="one-half-feeds">
<div class="title">
<h2>Industry News</h2>
</div>
<div id="newsfeed"></div>
</section>
<section class="one-half-feeds">
<div class="title">
<h2>Tech Reviews</h2>
</div>
<div id="reviewfeed"></div>
</section>
I cannot for the life of me figure out why all the other browsers are not
having an issue at all, but Mozilla just won't work...