Christopher L. Sayers

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromChristopher L. Sayers
ToMe
SubjectMaking Internet Explorer use PNG Alpha transparency
Date19 January 2006 03:23
Hello!
 
It is nice to find a simple, working (key word!), non-JavaScript solution to
this IE problem!  Thank you.  However, I have run into a challenge.  Your
first solution with the code in-line works great.  However, I am interested
using the conditional CSS option you provide at the end of the page
<http://www.howtocreate.co.uk/alpha.html>  which accounts for IE 7.  Yet
when I tried it out, it did not work (I am using IE 6.0, fully patched).  I
took a look at your e-mail posts and did not see a solution - perhaps I
missed it?
 
Another related issue is the use of the <a> tag take to create a link with
the image by enclosing the <span> in the <a></a> tags.  (Enclosing just the
<img> tag, as one would think to do under normal circumstances, does not
work at all.)  Under Netscape and Firefox, the cursor turns into a hand (as
it should) when run over the image.  However, under IE, the pointer remains,
so it is not immediately obvious that the image is also a link (yet it does
work if you click on the image).  If your code is removed, the cursor
rollover works fine and the arrow changes into a hand.  Any suggestions?
 
Thank you!
 
Chris
FromMe
ToChristopher L. Sayers
SubjectRe: Making Internet Explorer use PNG Alpha transparency
Date20 January 2006 09:45
Chris,

> <http://www.howtocreate.co.uk/alpha.html>  which accounts for IE 7.  Yet
> when I tried it out, it did not work (I am using IE 6.0, fully patched).

hmmm, I am guessing you are using a strict doctype - I forgot to include
display:inline-block in the article - I have updated it now with details:
http://www.howtocreate.co.uk/alpha.html

> However, under IE, the pointer remains

Seems IE forgets the cursor when you use the alphaimageloader. Good news is
it's easy to fix. All you have to do is tell IE to use the correct cursor
again, using the 'cursor' style. The correct value is 'pointer' but IE 5
does not understand that (it uses a proprietary 'hand'), so use 'hand' and
put it in the conditional comments.

a:link, a:visited { cursor: hand; }


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
FromChristopher L. Sayers
ToMe
SubjectRe: Making Internet Explorer use PNG Alpha transparency
Date20 January 2006 18:18
Hi!

Thank you for the fixes.  We're batting 500 at this point.  The cursor fix
worked great (however "cursor: hand" needed to be put on "a:active" and
"a:hover", instead of "a:link" and "a:visited" - no big deal. ;-)

The "display:inline-block" update appears to have had no effect.  I still
have a white instead of transparent background even with this change.
Again, using the first of your two fixes on your alpha.html pages works
fine.  It's just the conditional one - which I find much cleaner - which
does not work.  There is no doctype at all in the HTML I am using (is that
perhaps the problem?).  Any other suggestions?

Thank you for your time! :-)

Chris
FromMe
ToChristopher L. Sayers
SubjectRe: Making Internet Explorer use PNG Alpha transparency
Date20 January 2006 18:55
Chris,

> The "display:inline-block" update appears to have had no effect.

OK, I think I will need to see the page for myself, if that is possible. Is
it online or can you attach it to an email?
FromChristopher L. Sayers
ToMe
SubjectRe: Making Internet Explorer use PNG Alpha transparency
Date20 January 2006 19:09
Hello!

I just tested the code locally to be sure and it works fine, so it's not
your fault.  The problem appears when the code is included in a scroller.
My guess is that the scroller doesn't know how to handle the conditionals.
You may see the problem here ([URL]), but
I do not expect you to do anything at this point since your code works as
advertised! :-)  (If you do have any ideas, I'm all ears!)

Thanks!

Chris
FromMe
ToChristopher L. Sayers
SubjectRe: Making Internet Explorer use PNG Alpha transparency
Date21 January 2006 00:44
Chris,

> I just tested the code locally to be sure and it works fine, so it's not
> your fault.

:)

> The problem appears when the code is included in a scroller.

Trying to decipher the script ...
Looks like the content is held in these files (1,2,3,etc):
[URL]/scroller/scroller1.html

From the look of it, you should be able to add the fix directly into those
files. Put the conditional comment stuff in the head, and the image and span
wherever you normally want them. I can't see anything in the stylesheet
those files use that could conflict with it, so just try adding it direct
into that file, then load that file alone into your browser (not in the
scroller) and see if it works as a normal file. If it does, then try the
scroller again, with that file in it. If it doesn't, well, you know where to
find me :)
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.