Forum Moderators: not2easy
The issue:
* Scaling a wide image (my 'bar.jpg' is 616x8) to N percent of the containing object has a random nasty side effect in IE.
* The image itself scales nicely... however
* At random++ The containing object gets expanded to the full (unshrunk) width of the image.
* (++random: without touching anything at all, refresh the browser N times. In my case, I get the wrong effect in IE6 about half the time.)
* The Holly Hack has no effect on this.
* In my simple tests, it only breaks when used in an old-fashioned table. In Real Life, it breaks under many other conditions. One was a complex set of pure <div> code with some hanging indents.
* I'm guessing that once resolved, this may be the real underlying issue for a number of other hassles folks are having.
Question: ANY IDEAS? For now, my only workaround has been to shrink my general-purpose histogram image to something small enough to fit inside any given container.
I give three examples:
* pixel-defined tables solution (always works)
* percent-defined tables solution (half-broken)
* percent-defined div solution (works when this simple)
<?xml version='1.0' encoding='iso-8859-1'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> * html * { /* height: 1px; */ }/* IE hasLayout */
</style>
</head>
<body>
A new (?) and aggravating IE bug:<br/>
Images shrunk in pixels are ok...<br /><br/>
Bar is half (100px) of a 200 pixel red cell.
<table border='1' width='100%'>
<tr><td><p>A resizable cell<p></td>
<td width='200' bgcolor='red'>
<img src='bar.jpg' style='height: 12px; width:100px;' /> fixed histog.</td></tr>
</table><br /><br />
An image shrunk to N percent of container USUALLY 'leaks': its original size makes the container (even a table!) too big...<br/>
Doesn't matter if you use 'style=width' or old fashioned 'width=xyz'<br />
For me, the effect is random: click reload ten times and you see it about half the time.<br/>
Bar should be half (50%) of a 200 pixel red cell.
<table border='1' width='100%'>
<tr><td><p>A resizable cell<p></td>
<td width='200' bgcolor='red'>
<img src='bar.jpg' style='height: 12px; width:50%' /> fixed histog.</td></tr></table><br /><br />
A no-tables version... works when this simple:
<div style='width:100%;border: 1px solid black;'>
<div style='float:right; border:1px solid black;background-color:red;width:200px;'>
<img src='bar.jpg' style='height: 12px; width:50%' /> fixed histog. </div>
<div style='border:1px solid black;'>
A resizable cell</div>
</div>
</body></html>
* On my local machine, the simple demo breaks about half the time
* I uploaded the exact same code to a server so you could have access. So far, I can't EVER get it to break when running from there. Same (apache) server.
* In a "real world" situation, not reduced for analysis... it fails 100% of the time in IE.
The ONLY way I could make it work properly was to shrink the underlying graphic.
[edited by: SuzyUK at 11:49 am (utc) on Oct. 27, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]
Did you clear your cache between EVERY TEST INSTANCE? If not, then your test is probably screwed....
I tested this in IE6 on XP SP2 and can't see anything broken. All 3 examples appear the same?
Suzy
Welcome to WebmasterWorld, MrPete. Yup, that addy's kind of crosswise the TOS #13...
Did you clear your cache between EVERY TEST INSTANCE?
For a start, the XML declaration will throw IE into Quirks Mode. The doctype MUST be on the first line in IE. See if it still happens in Standards Mode.
I've now learned even more about these modes... (bleah!). Changing to Standards Mode has fixed it, even on local server. (Sadly, using standards mode makes IE even worse for a variety of other page elements. ex: Youngpup's slide menu gets really funky in standards mode :()
I'll have to see if I can get to Standards Mode...
I tested this in IE6 on XP SP2 and can't see anything broken. All 3 examples appear the same?
Sounds like I oversimplified the example. On our real site, it breaks 100% of the time. For now, I surrendered and shrank the graphic. No time for more play...
Be sure to take a look at the forum charter [webmasterworld.com] as well (specifically under "Linking"). Different forums have different levels of strictness about various types of postings.
And here's [webmasterworld.com] an in depth discussion about why we're so picky about URLs around here.
