SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE png transparency hack

    Hello good pple of the forum,
    I've searched the forum and found some solution that should work for this problem. Basically, i have some couples of transparent background pngs on my site which needs to be displayed correctly in IE 6.
    css code:
    PHP Code:
    #wrapper div#leftcontent div#verticalnavbar {
        
    width:215px;
        
    font-size:14px;
        
    float:left;
        
    margin-bottom:1px;
        
    margin-top:1px;
        
    height204px;
        
    background-imageurl(images/menubg1.png);
        
    padding0px;
        
    margin-top:4px;
        
    font-family"Trebuchet MS"Tahomasans-serif;
        
    line-height1.5em;
        
    text-aligncenter;
        
    background-repeatno-repeat;
        
    margin-left:2px;
        

    filter hack:
    PHP Code:
    html #wrapper div#leftcontent div#verticalnavbar{
            
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png"sizingMethod='scale');


    Please what am i doing wrong? Help me

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If those are separate IDs being applied to separate elements (which I'm sure they are), then you'll have to separate the selectors with commas. Then do the same with the Star HTML hack. The hack for example, would look like this:
    Code:
    * html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ 
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 
    
    }
    If the three IDs are being applied to the same element, then you won't need all those ID selectors, and can just reference the one at the "bottom of the food chain" (the last one) since it'll be the element that has the filter applied to it.

    Of course, I'm just grasping at straws here since I can't even see the HTML code you're using.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    * html #wrapper div#leftcontent div#verticalnavbar {
        background-image: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 
    
    }
    You need to also remove the background image from the previous rule.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dan
    Of course, I'm just grasping at straws here since I can't even see the HTML code you're using.
    That looks correct to me Dan

    I would add that you will also need to cancel out the original background image or it will overwrite the filter image.

    e.g.

    Code:
    * html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ 
     background:none;       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); 
    
    }
    An example:

    http://www.pmob.co.uk/temp/transparent-test3.htm

  5. #5
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everybody from dan,logic_earth and paul, it worked.
    Thanks once again Cheers

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Glad to hear (ok, read) it.

  7. #7
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not working for me

    I've got a png background issue in IE as well but I tried the solution posted here and all it does is make the background dissapear in IE6.

    Am I missing something?

    http://ns3.practisinc.com/~concordemed.com/content.html
    The blog: ChrisMonnat.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The element needs "haslayout"

    Code:
        * html #content {height:1%; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ns3.practisinc.com/~concordemed.com/images/bg_content.png',sizingMethod='scale'); }

  9. #9
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats what I first thought too... but it still doesn't work. I reuploaded the updated css with the height:1%; and it still doesn't show the background in IE6.
    The blog: ChrisMonnat.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have it working locally ok with the original code I gave.

    Use an asbolute reference to the image or change the path as I believe the image path is relative to the page that displays it and not the css file as per usual.

  11. #11
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Referencing the image absolutely did the trick!!

    Thanks.
    The blog: ChrisMonnat.com

  12. #12
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just realized that I have a larger problem now than the background. Things are "looking" good but I can't click any links or select anything that has that background in IE6. Any idea why this is?
    The blog: ChrisMonnat.com

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Any idea why this is?
    Yes

    It's a known problem with the filter and why I avoid using it unless absolutely necessary.

    Try this fix (which isn't 100% guaranteed to work):
    Code:
        #content a{position:relative}
    You may need to make the css specific if it gets in the way of other styling.

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting position: relative; and then apply a z-index to see if it works (just as a test at first). Sounds like you may have a depth sorting error, but I can't tell without the code.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sounds like you may have a depth sorting error,
    No, its a known problem with the filter and can take various forms and various fixes.

    http://www.satzansatz.de/cssd/tmp/al...nsparency.html

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

    The fix I gave should work in this case though

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot about the filter, actually. (Just woke up around the time that was posted.)

  17. #17
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick... thanks again!
    The blog: ChrisMonnat.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
  •