Why does IE put a gray background on my image?

Discussion in 'HTML' started by John Salerno, Feb 5, 2006.

  1. John Salerno

    John Salerno Guest

    Here is my first JavaScript experiment (naturally a rollover!). But my
    question is about the image itself. It looks fine in Firefox and Opera,
    but in IE it has a gray background. The image itself has a transparent
    background, so I have no idea where the gray comes from.

    http://www.johnjsal.com/button.html
     
    John Salerno, Feb 5, 2006
    #1
    1. Advertising

  2. __/ [John Salerno] on Sunday 05 February 2006 08:19 \__

    > Here is my first JavaScript experiment (naturally a rollover!). But my
    > question is about the image itself. It looks fine in Firefox and Opera,
    > but in IE it has a gray background. The image itself has a transparent
    > background, so I have no idea where the gray comes from.
    >
    > http://www.johnjsal.com/button.html


    Internet explorer does not handle high bit-level (32 bits?) transparencies.
    This affects alpha blending rather badly. The solution is often to embed the
    object in background with the same colour as that which IE renders the
    transparency part. The other solution is to persuade everybody to upgrade to
    good Web browser, thereby allowing the IE deficiency take it toll rather
    than be worked around. The issue should have been addressed in the
    development of IE7.

    Roy

    --
    Roy S. Schestowitz | "All your archives are (sic) belong to Google"
    http://Schestowitz.com | SuSE Linux | PGP-Key: 0x74572E8E
    9:10am up 19 days 4:26, 14 users, load average: 1.16, 1.06, 0.96
    http://iuron.com - next generation of search paradigms
     
    Roy Schestowitz, Feb 5, 2006
    #2
    1. Advertising

  3. John Salerno

    Neredbojias Guest

    With neither quill nor qualm, John Salerno quothed:

    > Here is my first JavaScript experiment (naturally a rollover!). But my
    > question is about the image itself. It looks fine in Firefox and Opera,
    > but in IE it has a gray background. The image itself has a transparent
    > background, so I have no idea where the gray comes from.
    >
    > http://www.johnjsal.com/button.html


    It's because it's a png. IE doesn't do png transparencies well. Try a
    gif.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Feb 5, 2006
    #3
  4. John Salerno

    Toby Inkster Guest

    Neredbojias wrote:

    > It's because it's a png. IE doesn't do png transparencies well. Try a
    > gif.


    And with a little creativity, you could serve up a transparent GIF to any
    browsers with "MSIE" in their user-agent string, and a PNG to everyone
    else.

    Alternatively, there are a few tricks to get IE to handle alpha-blended
    PNGs. They don't make for pretty coding, but can give you pretty pages.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 5, 2006
    #4
  5. On Sun, 5 Feb 2006, Toby Inkster wrote:

    > And with a little creativity, you could serve up a transparent GIF
    > to any browsers with "MSIE" in their user-agent string, and a PNG to
    > everyone else.


    Don't do that - it's bad in principle, and works badly in practice.
    For all the usual reasons.

    PNG versus GIF can be successfully negotiated on the basis of the
    client's initial Accept: header. As far as I recall, even MSIE gets
    this correct enough to be useful - at least on its initial request.

    Apache's MultiViews will do this pretty much for free, out of the box,
    if you let it.

    (MSIE has a silly habit of sending "Accept: */*" when reload is used,
    but I guess we can live with that. Workarounds would likely have
    negative impact on real WWW browsers, so I won't suggest those. But
    your proposed kludge would have negative impact on /all/ of the real
    WWW minority browsers that feel they need to masquerade as MSIE in
    order not to get locked out by idiot webmasters.)
     
    Alan J. Flavell, Feb 5, 2006
    #5
  6. John Salerno

    Toby Inkster Guest

    Alan J. Flavell wrote:
    > Toby Inkster wrote:
    >
    >> And with a little creativity, you could serve up a transparent GIF
    >> to any browsers with "MSIE" in their user-agent string, and a PNG to
    >> everyone else.

    >
    > Don't do that - it's bad in principle, and works badly in practice.
    > For all the usual reasons.


    Pah! I'll agree that detecting browser by user-agent string is generally
    rather hit-and-miss, but this is one particular application where
    user-agent matching won't cause any problems.

    Potential pitfall #1: a non-IE browser has "MSIE" in the user-agent string
    and gets sent a GIF instead of a PNG. This isn't a huge problem -- the
    only browser that does this by default is Opera, but this will change in
    version 9.0. And when a browser does do this, it gets the GIF, which
    should still look fairly good -- just not as good as the PNG.

    Potential pitfall #2: vice-versa. It is possible, but difficult to change
    the u-a string for MSIE. But because it's quite tricky, not many people
    will have done it, so not really worth worrying about. Besides which, the
    only problem they'll experience in this case will be cosmetic.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 5, 2006
    #6
  7. On Sun, 5 Feb 2006, Toby Inkster wrote:

    > Potential pitfall #1: a non-IE browser has "MSIE" in the user-agent string

    [...]

    You've only bothered with the *obvious* pitfalls. As you say, those
    are basically cosmetic, in relation to the present problem.

    Then there's cacheability, particularly in relation to those who
    (knowingly or unknowingly) are accessing web resources via a proxy
    cache server.

    Using proper content-negotiation techniques such as MultiViews would
    at least behave protocol-correctly in that regard. You may not think
    the practical consequences are ideal - but it's the best we've got,
    whenever you have a requirement to send different content to different
    clients. And at least if *you* play your part in that concordat, the
    other participants always have a chance to improve the part which
    falls to /them/

    Whereas, if you kludge your part, none of the other participants gets
    the chance to do better.
     
    Alan J. Flavell, Feb 5, 2006
    #7
  8. John Salerno

    Neredbojias Guest

    With neither quill nor qualm, Toby Inkster quothed:

    > Neredbojias wrote:
    >
    > > It's because it's a png. IE doesn't do png transparencies well. Try a
    > > gif.

    >
    > And with a little creativity, you could serve up a transparent GIF to any
    > browsers with "MSIE" in their user-agent string, and a PNG to everyone
    > else.
    >
    > Alternatively, there are a few tricks to get IE to handle alpha-blended
    > PNGs. They don't make for pretty coding, but can give you pretty pages.


    Quite true, although I think AJF has a bit of a point. Anyway, alpha
    pings confuse me so I prefer the simplicity of a gif (with, sadly, its
    256 color limit) when dealing with web transparencies.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Feb 5, 2006
    #8
  9. John Salerno

    kchayka Guest

    Neredbojias wrote:
    >
    > alpha
    > pings confuse me so I prefer the simplicity of a gif (with, sadly, its
    > 256 color limit) when dealing with web transparencies.


    So, use 256-color png instead. IE handles them the same as gif, plus the
    resulting image size will be smaller than a 24- or 32-bit png.

    In the OP's case, alpha transparency isn't really needed, anyway.
    Indexed transparency is plenty adequate.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 6, 2006
    #9
  10. John Salerno

    Neredbojias Guest

    With neither quill nor qualm, kchayka quothed:

    > Neredbojias wrote:
    > >
    > > alpha
    > > pings confuse me so I prefer the simplicity of a gif (with, sadly, its
    > > 256 color limit) when dealing with web transparencies.

    >
    > So, use 256-color png instead. IE handles them the same as gif, plus the
    > resulting image size will be smaller than a 24- or 32-bit png.


    Oh really? I didn't know that (although I _have_ found that pings are
    usually smaller than gifs when the number of colors is the same.) I'll
    try it the next time I need simple transparency.
    >
    > In the OP's case, alpha transparency isn't really needed, anyway.
    > Indexed transparency is plenty adequate.
    >
    >


    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Feb 7, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Oleg Ogurok
    Replies:
    0
    Views:
    783
    Oleg Ogurok
    Jan 27, 2005
  2. Dev S Shrestha
    Replies:
    1
    Views:
    714
    Thomas Matthews
    Nov 11, 2003
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,072
    Smokey Grindel
    Dec 2, 2006
  4. guassian

    How can I read a 8 bit gray image using c ?

    guassian, Mar 13, 2006, in forum: C Programming
    Replies:
    6
    Views:
    684
    Ben C
    Mar 13, 2006
  5. Gabriel Rossetti
    Replies:
    3
    Views:
    576
    Jerry Hill
    Apr 25, 2008
Loading...

Share This Page