Help with Image sizing Issue in ie

i have some markup, (i know it does not use css - this is a restriction in my environment) it goes like this:

<table width="100%" cellpadding="5">
<tr><td  width="60%">
    <img src="../images/oracle_memory.gif" alt="oracle_memory.gif" width="100%"/>
</td>
<td>
</td>
</tr>
</table>

In ie, the image shows always at 100% of its original size, in other browsers (chrome, firefox) 开发者_开发百科the image scales to fill 100% of the cell size - which is what is intended...

is there an ie specific hack or syntax that will make this image behave consistently in all browsers?

tia

You are setting the width of the image rather then that of the style of the image.

Change:

<img src="../images/oracle_memory.gif" alt="oracle_memory.gif" width="100%" />

Into:

<img src="../images/oracle_memory.gif" alt="oracle_memory.gif" style="width:100%;" />

I even think IE is right is this case.

Some things to try.

• Try to use width="inherit" on the img or use the min and max-width styles on both the td and the img until you get what you want.

• if you are familiar with javascript or jquery you can just get the width of the parent element (the td) and set the image width to that. That would force the image to load scaled to whatever the parent container is.

Or you can give your td an id="xyz" and do this inline:

<img width="javascript:document.getElementById('xyz').width">

• Get a Developer Tools installed in IE so you can inspect the DOM and modify the Styles etc until you get it looking the way you want it.

What happens if delete the width="100%" from the image tag?

If it is always 100%, do you even need this style value?

You are not scaling the image dimension.

Just a thought...

use style="max-width:auto;" instead of max-width:100%;"