Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    VA/DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a PNG fix for IE that actually works?

    Hi guys,

    I did a search here but I think my choice of words was too vague.

    I have a png problem. I've searched online for many answers, but none of them seem to work, or clearly I'm doing something wrong. I visited a few sites that were using some of the popular alphaloaderthingy, and in IE6, all of their png images showed very ugly black outlines. So basically this tells me that they dont work, OR is this supposed to happen? I'm very confused lol. Are these "png fixes" supposed to make the png show up the way it should in IE6 like it does in FF and IE7? Or do they just give your transparencies those ugly black edges?

    here is an image background I'm trying to use, which of course shows up perfectly in the most recent browsers, but in IE6 it fills the empty space with a basic white color, and if I add any of those supposed "fixes", it makes the edges black. which isn't want I want.

    http://img514.imageshack.us/img514/7115/darkbgag4.png

    any help??

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Hi and Welcome to the CodingForums Rachielle,

    What outlines do you mean? Can you show us those pages?
    I’m usually using the CSS filter property to apply a transparent background image to an element. I’ve set up a small test page showing it (ignore the “quote” stuff in the source code, that has been a different test found on mandarindesign.com). And the black outline around the images belong to the images by the way.

    Also, I’ve recently designed another website using this method (see menu dropdowns). I had some extensive “hacking” to do in order to get this to work.

    Note that IE doesn’t apply transparency to an element in the source code but it’s kinda creating a new secret element with transparency. There’s some interesting reading: http://www.satzansatz.de/cssd/tmp/al...nsparency.html

    Also note that IE can display transparency but only to a certain extent (percentage). I haven’t checked in detail but it will just make everything below like 20% opacity (= almost transparent) completely transparent, resulting in a less smooth transition than modern browsers.
    Last edited by VIPStephan; 05-17-2007 at 03:28 PM.

  • #3
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Code:
    #regular_logo
     {
      background:url('test.png'); width:150px; height:55px;
     }
      /* \ */
     * html #regular_logo
     {
      background:none;
      float:left;
      width:150px;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
     }
     /* */
    Source: http://www.smashingmagazine.com/2007...er-css-coding/
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •