Image not fitting to table, td in IE(IE8,IE9), works well in FF

Question

Could you please help me in fitting an image to the table, td height. Whenever the table expands, the image seem to maintain its original size and not fit into the table width and height. The problem is happening in IE8, IE9. It seems to work fine in Firefox. Please find the html and css below:

HTML:

<table cellspacing="0" cellpadding="0" class="special-offer-banner">
        <tbody><tr>
            <td width="100%" height="100%" class="special-offer-image">
                <img width="100%" height="100%" alt="BOGO &amp; more!" src="/wcsstore/BonTon/images/bonton/gateway_bogo_web.jpg">
            </td>
            <td class="special-offer-messages">
                <p class="message-container">
                    <span class="strong spo-offer-msg1">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span><br>
                    <span class="spo-offer-msg2">wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords</span>
                </p>
            </td>
            <td class="more-special-offers">
            </td>
        </tr>
    </tbody>
</table>

CSS:

.special-offer-banner {
border: 2px solid #333333;
width: 100%;
height: 120px;
margin: 5px 0;
display: table;
table-layout: fixed;
}

.special-offer-banner .special-offer-image {
width: 340px;
}

.special-offer-banner .special-offer-image img {
display: block;
}

Answer 1

In html5 the width and height attributes on an img tag can not be a %. I would try adding a CSS rule to make the width/height of the image 100%.

.special-offer-banner .special-offer-image img {
   display: block;
   width:100%; 
   height:100%; 
}