SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    transparency issues in IE again

    I'm unable to get IE to see the Alpha fix for this image. I must be missing something.

    http://www.e-centricity.net

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you should be applying the filter to the image, not the container.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use this javascript instead.
    PHP Code:
    function correctPNG() {
        for(var 
    i=0i<document.images.lengthi++) {
            var 
    img document.images[i]
            var 
    imgName img.src.toUpperCase()
            if (
    imgName.substring(imgName.length-3imgName.length) == "PNG") {
                var 
    imgID = (img.id) ? "id='" img.id "' " ""
                
    var imgClass = (img.className) ? "class='" img.className "' " ""
                
    var imgTitle = (img.title) ? "title='" img.title "' " "title='" img.alt "' "
                
    var imgStyle "display:inline-block;" img.style.cssText
                
    if (img.align == "left"imgStyle "float:left;" imgStyle
                
    if (img.align == "right"imgStyle "float:right;" imgStyle
                
    if (img.parentElement.hrefimgStyle "cursor:hand;" imgStyle  
                
    var strNewHTML "<span " imgID imgClass imgTitle
                
    " style=\"" "width:" img.width "px; height:" img.height "px;" imgStyle ";"
                
    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                
    "(src=\'" img.src "\', sizingMethod='noscale');\"></span>"
                
    img.outerHTML strNewHTML
                i 
    i-1
            
    }
        }
    }

    if (
    navigator.appName.indexOf('Microsoft') != -1){
        
    window.attachEvent("onload"correctPNG);

    Tom.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    at the risk of being bad I'm really trying to stay away from JavaScript as a solution right now. I just don't want it to be dependent on a technology that can be shut off by the user.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can do it without js?

  6. #6
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not re-comp and slice so that the butterfly is included in the header image?
    No, I REALLY dislike having to use Joomla.

  7. #7
    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)
    Just so you know, any type of expression, filter, .hta/.htc file will use either JavaScript or Microsoft's "JScript" to render the effects you seek, and can be disabled by the user just as easily as actual JavaScript can. Browsers by and large don't care what the client-side scripting language is, if they can disable it, they will (when the user says to, of course).

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that information...so based on what I have in there now what seems to be the problem?

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amidude
    Thank you for that information...so based on what I have in there now what seems to be the problem?
    Um, did you not read what I wrote before?

    Looks like you should be applying the filter to the image, not the container.

  10. #10
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that...forgot to tell you I tried that and it didn't work. I even tried taking out the image called in the <div>. IE then displayed it fine but FF couldn't find the image. So I'm truly at a loss here. I apologize if I am missing something here. This is my first time trying to get something like this to work and whereas I have fixed a multitude of other problems I seem to have this one big one that I can't get over.

    I've looked at the code over and over and I've been to stupid Microsoft's lame website and still I can't see the problem here. It should be working the way it is written...shouldn't it?

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It could be the space in enabled=' true'. Try removing the space or try taking it out altogether (I've not needed it in the past).

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy Monkeys!!!! That did it!!!! Thank you so much!!!! Man, and I was told over and over by this other guy that "that's how it's supposed to be". Thank you so much for your help. Man, if there's anything I can ever do for you just let me know.

    Also, I really like your work on your site. Would you by chance have any pointers for me on my sites design? I'm open to any suggestions.

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amidude
    Would you by chance have any pointers for me on my sites design?
    I think it looks pretty good as is. The only things you could maybe look at are the stripey bg in the header doesn't quite match up at about the same point either side of the main content area.

    And you might want to give your nav a height in em and make the bg-color the same as the bottom of the bg-image so that when the text size is increased, the bar increases in size too.

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. I will look into that.

  15. #15
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it okay to have more than one transparent .PNG on a page? If so...what are the considerations to keep in mind prior to doing so? I'm thinking about making the background shadow a PNG as no matter what I do I can't seem to save an image that won't have that problem with the blending.

  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 do it all the time, but I use the PNG-8 encoding, rather than PNG-24.

    Also, Internet Explorer 7 will be shipping this month, so you won't have to worry too much about alpha-transparency problems for much longer (assuming you tell your IE6 visitors to either upgrade or get a real browser, like Opera).

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL...sweet. I'll keep that in consideration. Maybe I should add the link down at the bottom with the Firefox link. ;-)

  18. #18
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried PNG 8 and it wouldn't display in either IE or FF. Went back to PNG 24 and it shows up in FF again. IE stops displaying any graphics in the middle container if I try and make a transparent PNG for the shadow in the DIV titled "mainCtr".

    This is what I tried and it failed to show the background shadow as transparent and didn't display any of the title images inside the container.

    Code:
    * html #butterfly {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/butterfly2.png');}
    * html #butterfly img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    
    * html #mainCtr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/backgrd.png');}
    * html #mainCtr img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    
    *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */

  19. #19
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, you don't need the line with opacity=0. If you're using bg-images though you do need to make IE bg-image { none } in conjuction with using the filter because otherwise you'll still be showing the unfiltered PNG.

  20. #20
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    IE bg-image { none }
    I apologize...I'm not quite sure how to go about this.

    I understand that I would use Background-image:none; but I'm totally lost where to put it. Since I am calling the image in this portion of the normal browser CSS file.

    Code:
    #mainCtr {
    			width: 708px;
    			height: 757px;		
    			margin: 0 auto 0 auto;
    			background: url(../imgs/backgrd.png);
    			background-repeat: no-repeat;
    		}
    Last edited by amidude; Oct 12, 2006 at 14:32.


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
  •