SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down Div background PNG problem in IE [screenshot]

    Here is a screen shot of the problem:



    That bubble is a PNG file, all the other files on the page, save 3 are PNG files. They all render correctly, but not this background.

    Here is the IE PNG fix I am using:
    Code:
    img {
    	behavior: url(pngHack.htc); /*IE PNG HACK*/
    }
    Thanks
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand that my png fix is on IMG, does this not relate to the CSS backgrounds????
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

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

    The pnghack is for foreground images only I believe.

    You could use the alpha filter for background images although it is rather limited.

    You would need to do this.
    Code:
    #box1_info{
        position:absolute;
        height: 284px;
        width: 278px;
        margin-left: 402px;
        margin-top: 20px;
        visibility: hidden;
    }
    html>body #box1_info{
        background-image: url(http://www.praxisskis.com/ski/images/box1_div.png);
        background-repeat: no-repeat;
    }
    * html  #box1_info{    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.praxisskis.com/ski/images/box1_div.png',sizingMethod='image');
    }
    
    #box1_info .text{
        margin: 10px 10px 10px 10px;
        font-family: "Courier New", Courier, mono;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        text-decoration: none;
    }
    Also delete your #imgleft styles as they are nonsense.

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not doing it... I hate IE. It hinders fwd progression on the development side of things. I have CSS fixes all over the place for that browser.... AHHHHHHH!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Not doing it...
    Now now - don't throw your toys out of the pram

  6. #6
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I had enough IE for one afternoon and had to walk away. Thanks for the CSS, it works perfect!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  7. #7
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a quick play with the CSS fix and it works for about a split second when calling the background-image from a remote server, and then it flickers and stops working. (Not too good for accessibility purposes!) Secondly, when the background-image property is called from a local drive, it ceases to work entirely in IE6.

    Short of turning back time and egging MS staff to build a better browser eight years ago, does anyone else have other suggestions for a workaround?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bear in mind that IE 7 handles PNG support just fine now, and it's only for IE 5.5 and 6 that you'll have to deal with this sort of mess .

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kayloe
    I had a quick play with the CSS fix and it works for about a split second when calling the background-image from a remote server, and then it flickers and stops working. (Not too good for accessibility purposes!) Secondly, when the background-image property is called from a local drive, it ceases to work entirely in IE6.

    Short of turning back time and egging MS staff to build a better browser eight years ago, does anyone else have other suggestions for a workaround?
    You will need to provide code or a link for us to help you. The fix above works but there are some problems to overcome as well as some limitations to what you can do.

    Use an absolute image path for the png as the alpha image loader takes the image path to be relative from the html file and not the css file as with usual background images.

    More info:

    http://www.daltonlp.com/view/217

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function alphaBackgrounds(){
        var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
        for (i=0; i<document.all.length; i++){
            var bg = document.all[i].currentStyle.backgroundImage;
            if(document.all[i].nodeName == "IMG")
            {
                if(document.all[i].src.match(/\.png/i) != null)
                {            
                    var mypng = GetFileName(document.all[i].src);
                    document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/"+mypng+"', sizingMethod='scale')";
                    var x = document.all[i].width;
                    var y = document.all[i].height;
                    document.all[i].src = "images/m_trans.gif";
                    document.all[i].height = y;
                    document.all[i].width = x;
                }
            }
            else
            {
                if (itsAllGood && bg)
                {
                    if (bg.match(/\.png/i) != null){
                        var mypng = bg.substring(5,bg.length-2);
                        document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
                        document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
                    }
                }
            }
        }
    }
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
        window.attachEvent("onload", alphaBackgrounds);
    }
    I use this which deals with bg and img.

    Hope it helps.



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
  •