Sent by Ray Drainville / Argument from Design on 28 February 2005 10:10
Dear Denise,
> Actually, all those things are happening, Ray, at least in IE6 on WinXP.
> The difference I see in IE compared to Firefox is that the gif appears
> on the left side in IE rather than the right side as it does in Firefox.
Sorry, you got caught out by my barrage of messages! I was finally able to
get PNGs working on the page (see a later message from that same day), and
this is why it looks (almost) right in Win/IE. Here's what's happened:
IE/Win cannot handle PNG graphics appropriately--specifically, 24-bit PNGs
with transparency. You need something to help it along. I used a bit of
IE-only Javascript which calls up an IE-only filter.
<http://www.skyzyx.com/scripts/sleight.php>
This is the filter:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/imag
e.png',sizingMethod='crop');
The details of this filter (including the various parameters that you can
use) are located here:
<http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaima
geloader.asp>
So, instead of a bunch of different GIFs and a number of different classes
for each section of the website, we have *one* 24-bit PNG. Very nice :)
HOWEVER... there remains a problem. We're using all this slight-of-hand to
get IE/Win to use the PNG, and on the home page it works properly. On
subsidiary pages of the site (there's only one subsidiary page in my
preview, see the URLs below), IE/Win doesn't follow the rules. Instead of
being tacked to the top right of the containing DIV, it's tacked to the top
left:
<http://www.ardes.com/proposals/matrixweb/>
<http://www.ardes.com/proposals/matrixweb/training/>
The relevant CSS is this:
#tagline {
background-image: url(../images/bg/bg.png);
background-repeat: no-repeat;
background-position: right top; }
I put it at the end of the document in the hope that this would 'jog'
IE/Win's 'memory', but it didn't help.
Note that the above pages look perfect in Firefox & Safari, and ever so
slightly wonky in Opera.
If anyone can help fix this problem, I'd appreciate it. I don't know why
IE/Win isn't honouring the placement of the PNG. I suspect it has to do with
that filter & its Javascript wrapper: for some reason, it overrides the CSS
declaration.
Best,
Ray
_____________________________________________________
Argument from Design--Web & Graphic Design
<http://www.ardes.com/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/