Image doesn't render when width and height are defined in percentage with <table> parent element

Question

I'm trying to scale down an image by percentage and this renders correctly in Firefox, but not in Internet Explorer. The img tag needs to be inside a table.

<TABLE>
 <TR>
  <TD>
   <img src="test.gif" width="60%" height="60%">
  </TD>
 </TR>
</TABLE>

Is there a better way to do this so it works in both browsers?

Answer 1

Try defining the dimensions in CSS instead:

<style type="text/css">
    .myImg{
        width:60%;
        height:60%;
    }
</style>

<table>
 <tr>
  <td>
   <img src="test.gif" class="myImg" />
  </td>
 </tr>
</table>

I don't think some browsers like when you define width/height inline as anything but a numeric value (i.e., width="200");

Anyway, give that a shot - good luck

Answer 2

Check out the source on http://www.joelonsoftware.com/ - the images within articles scale quite nicely. Use FireBug to help you with figuring out the CSS that will accomplish the scaling you want.