Hi there, I have problem with trying to using percentages to control the size of images in my website so they scale properly. In all other browsers than IE I can just use say the following #content {left: 200px; top: 0px; position: relative; width: 50%; height: 75%;} to control the style attributes of the image and when I make the browser window smaller or bigger it scales fine however in IE it stays the same size. I've tried both Divs and Tables and they give the same result (aka will work in FF, Opera, Chrome but not IE). I really need to sort this as it is delaying progress on the website so any help would be much obliged.

Your code works perfectly in IE7 if you apply the style to the img tag and not to a div container:-

#content {left: 200px; top: 0px; position: relative; width: 50%; height: 75%;}

 

<img id="content" src="images/raindroplets.jpg" alt="raindroplets"/>

 

Changing the window size changed the image width as a % of the window width in IE7 and Firefox but the height: 75% is ignored in both browsers and the height just changes in proportion to the width.

Your code works perfectly in IE7 if you apply the style to the img tag and not to a div container:-

#content {left: 200px; top: 0px; position: relative; width: 50%; height: 75%;}

 

<img id="content" src="images/raindroplets.jpg" alt="raindroplets"/>

 

Changing the window size changed the image width as a % of the window width in IE7 and Firefox but the height: 75% is ignored in both browsers and the height just changes in proportion to the width.

 

Hi there, thanks for the reply. It now works perfectly however when I pull the browser to the left as the content background image gets smaller (I have a black blackground with a content box that everything is placed on ontop of it in the middle of the page) it doesn't go to the left like it does with a table. Is there someway to fix this? I took out the left positioning but then it kinda invalidates the point of having the two images as you can barely see the background. Cheers.