Question

So in an html.erb document I have a table with in it and in that table is an image scaled to the size of the column like so:

   <table width="900" border="0" align="center" valign="top">
      <tr>
        <td><img src="someimage.gif" width="35%" height="95%" /></td>
        <td>a whole bunch more html content here</td>
      </tr>
     </table>

It works fine in Chrome but for some reason when I load the page in either IE or Fire Fox it shows the image in its original size, not scaled to the size of the of the column like it should be. I tried removing the height and weight properties instead replacing them with some in line CSS like this:

    <img src="someimage.gif" style="height:95%;width:35%"/>

but again I encounter the same issue. Works fine in Chrome but not in the other two. Does anybody know what might be causing the compatibility issue and what I can do to fix or work around it?

Edit: I probably should have mentioned that I tried defining the size of the images both in an external CSS file using absolute and relative as arguments for the position, followed by pixel values for the size, then later, after removing that CSS code, in the height and width section of the HTML5 img tags. In both cases zooming in any browser screwed up the overall look of the site which was why I switched to using percent values.

Answer 1

The browser cannot determine the width of columns until it has determined the (width of) its contents. And in your case the width of content depend of width of column. You’ll get unexpected results depending on browser and depending on whether the image is present in the cache or not.

Specify a width and height for the column and you’ll get the expected, consistent results. See demo here.