SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: IE PNG Fade Fix

  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE PNG Fade Fix

    Hey Guys.

    I am well aware that this issue has been brought up before, but after looking around the net, and finding lots of articles explaining the issue, I cannot seem to get it to work.

    Basically, I have a tool tip that has a PNG background image, which has a rounded square as a graphic (so the background behind the square is transparent), and it needs to fade in and fade out when called (with a opacity animation).

    The image is set as a background-image in a div.

    This works fine in all browsers, but in ALL IE BROWSERS there is an annoying black border that shows up around the png image.

    I tried using the alphaImageLoader filter to get rid of the border, but when I remove background-image and then set the filter property, nothing shows up.

    Here is my CSS:

    Code:
    background:none!important;
    width:32px;
    display:inline-block;
    height:32px;
    -ms-filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,enabled=true,src='/graphics/loader.png');
    filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,enabled=true,src='/graphics/loader.png');
    I have tried remoing the -ms-filter declaration (so only having one filter property) but nothing seems to work.

    I have also tried setting display:block and display:inline-block.

    No luck.

    Any ideas?
    I can't believe I ate the whole thing

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Did you try setting border:0 ? lol . If it's linked (which I'm assuming it is since it's a hover fade thingy ma bobby) then try this.
    Code:
    a img{border:0;}
    Got a link to look at if it doesn't work?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Did you try setting border:0 ? lol . If it's linked (which I'm assuming it is since it's a hover fade thingy ma bobby) then try this.
    Code:
    a img{border:0;}
    Got a link to look at if it doesn't work?
    Please read my post before replying.

    No it is not a link and NO there is NO img tag nested within AND NO there NO border in use.
    I can't believe I ate the whole thing

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,368
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What does it look like with the JS turned off?

    If the black border is due to the opacity filter being faded in then you are running into the fading opacity bug mentioned in this thread.

    If that's not the issue then we would probably need a link to check it out

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by matsko View Post
    Please read my post before replying.

    No it is not a link and NO there is NO img tag nested within AND NO there NO border in use.
    You never said there was no link, although you did say there was no <img> and you never said you didn't try border:0 so stop being rude .

    Got a link?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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