workaround for img scaling issue: IE6/IE7?
One of the pages on my site has an image I'd like to scale to fit center frame. The site is currently optimized for 1024x768.
The image tag width attribute is set to 100% to achieve scaling. Unfortunately, IE6/IE7 ignore this attribute if the original image is *larger* than the available space, and instead display it at its native size. Interestingly, if the original is larger than the space, IE6/IE7 properly scale the image *up*, but the result looks awful. The image is intentionally sized large enough so that scaling will be in the down direction when viewed on higher resolution monitors.
The page works exactly as intended in IE8 as well as other browsers.
This bug apparently only affects image tags inside a table container. My site is designed using tables. My developer is aware of other methods for achieving the 3-column layout, but he's unfamiliar with these methods and I prefer not to do a redesign until the site demonstrates it can generate revenue.
In the meantime, I've implemented a workaround feeding an image with fixed size to IE6/IE7 using a Conditional Comment, optimized for 1024x768.
Is anyone familiar with a hack / workaround for this bug? I tried Dean Edward's IE8.js script but it doesn't resolve this bug.
As a newbie to this forum, it appears I'm not allowed to post web links, so if you want to check the code on my site, hopefully you can find the URL on my profile page. The page in question is About Us, on the left menu. I set up a sandbox page without the conditional comments -- about3 instead of about_us
Thanks,
David
Last edited by ginahoy; 07-01-2009 at 04:09 PM.
|