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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Transparent PNG in IE (as a background image). Problems.

    Hello,

    I have a webiste which contains two iframes, linked to a semi-transaparent background image in their CSS file. It works beautifally in FF, however, IE won't accept my png's transparency, giving me ugly soli gray background.

    This is the website: Pondicherry

    In the css linked to the files that load inside the iframes, I've added this bit:
    Code:
    body{
    background-color: transparent;
    font:"Times New Roman";
    font-size:12px;
    color: #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/black.png');
    background-image:url(images/black.png);
    }
    However, the AlphaImageLoader filter won't give me full transparency, and it will do it only for the area where there's text. It also respects the padding for the iframe, which leaves it with the solid grey border. (You can see it in the site)

    I know I could fix this if it were an image (not a background image) by defining it's width and height with a class tag, but I don't know how to give the background image this properties for the filter to read them.

    MANY MANY
    thanks to any help, my mind is now boggled from trying to fix this and not being able to.

    (I've most certainly signed the petition for full PNG support in IE!!)

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I'm not sure what that website's supposed to look like but it appears as a mess in both Internet Explorer 6 and Firefox 1.5.

    In answer to your query, it isn't possible to display background PNG transparency in Internet Explorer for background images. Microsoft's CSS filters only work on actual images (i.e., img) and background images don't apply. Internet Explorer 7, currently in beta 2, is supposed to support PNG-24 transparency however, I believe.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, Arbitrator!

    Unless you're on something smaller than 1024x768, it should look fine in FF 1.5. (It does in mine, at least)

    So then I'd have to manually add page by page the image with the filtered class? (CSS has made me lazy). How would I avoid the padding issue for the iframe?


    ETA: This and this is how it's supposed to look.
    Last edited by Puckle; 05-01-2006 at 03:32 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.codingforums.com/showthre...hlight=opacity

    http://www.codingforums.com/showthre...ghlight=filter

    have look at those two posts. I covered some observations that may help you out some.

    The problem with IE is this...

    having a png with the filter will set above any link you use in IE. Meaning the filtered png will set above your links making them useless in IE. you can do some crazy layering and opacity stuff for IE though with some trickery. Opera doesn't support it so you can feed it pngs as with FF.

    Another issue is this:
    Code:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/black.png');
    background-image:url(images/black.png);
    having both the the filter and the css background in the styling makes IE choke. The background rule will overrule the filter as it comes last and your left with a png image which IE doesn't understand to make transparent.

    And like Arbitrator said...it looks messed up (albeit in different ways) in both FF and IE to me.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    My resolution is 1280×1024 and I see a bunch of blank area to the left on my screen and some mis-aligned content and layout to the right on my screen. In Firefox, the black box covers the all but the top of the gray box and the menu seems to be leaking out the top. In Internet Explorer the gray box appears on top but now there's a white box in the middle of the screen.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Here's your page as I see it:
    http://i10.photobucket.com/albums/a117/PLGaries/pondicherry.png

    Here's a page with a script that allows you to filter all PNGs on your page (not background images) for Internet Explorer:
    http://homepage.ntlworld.com/bobosola/pnghowto.htm
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh boy it sounds bad...

    I've re-uploaded the main files, perhaps I messed it up when trying to fix it.

    Why would it look different in different Firefoxes?

    ETA: I've switched to your resolution and it does look like that. Meh, now I have to fix *that*. Browsers and resolution should so be universal.


    Thanks a bunch!
    (I think I'll just scratch the background image for the main iframe and IE users will have to stick to the solid gray on the left iframe)

  • #8
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts


  •  

    Posting Permissions

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