WordPress.org

Forums

[resolved] iframe transparent background shows up white in ie (18 posts)

  1. tosok
    Member
    Posted 3 years ago #

    Can anyone help me figure out what to do to get a transparent background in ie like I can in Firefox? I'm using the iframe plugin and was so pleased how well it did in FF. But then I checked the page in IE.

    I've fiddled and researched, and fiddled some more but I can't figure it out. No matter what I do I still get that transparent background showing up white in ie to display properly.

    Here's the link: http://withoutreservation.org/?page_id=371

    Any help would be greatly appreciated. Thanks!

  2. kmessinger
    Moderator
    Posted 3 years ago #

    In IE9 is is ok. IE7 and 8 as you reported.

  3. esmi
    Forum Moderator
    Posted 3 years ago #

    It looks fine in IE9. Were you aware that earlier versions of IE do not support transparent pngs?

  4. tosok
    Member
    Posted 3 years ago #

    I'm using IE8. The table background is what is showing up as white. In FF it properly shows as transparent.

    Any thoughts or tricks?

  5. kmessinger
    Moderator
    Posted 3 years ago #

    Try the image as a gif file with transparency.

  6. tosok
    Member
    Posted 3 years ago #

    Having the same problem on this page: http://withoutreservation.org/?page_id=408 so I don't think it's an image issue. The content loading in iframe here does not have any graphics... just text. Still get the white background in IE8 but renders the transparent background correctly in FF.

    Any other suggestions on how to get the background to display transparent in IE8 instead of white? I'm a newbie, so if you have a suggestion for inserting/changing code, could you tell me what file(s) or where to make changes. Thanks!

  7. kmessinger
    Moderator
    Posted 3 years ago #

    Once again, good in IE9 and bad in IE7 and 8.

    The only way I know is a gif file. With those you can designate a tranparent area and they work in IE7 and 8.

  8. kmessinger
    Moderator
    Posted 3 years ago #

    Sorry about that. Don't know why I got stuck on the image thing.

    Change your iframe code to this.

    <iframe width="568" height="320" allowtransparency=true frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" src="http://www.withoutreservation.org/storyteller/article/index.php" ></iframe>

  9. tosok
    Member
    Posted 3 years ago #

    Thanks for the help! Can you direct me to what file I should put/change this code in?

    Is it the iframe.php WordPress plugin code, the source file: http://www.withoutreservation.org/storyteller/article/index.php or some other file?

    Thanks again.

  10. kmessinger
    Moderator
    Posted 3 years ago #

    Sorry, if you are using a plugin to generate the code then I don't know. I will look at the plug in though.

  11. tosok
    Member
    Posted 3 years ago #

    perhaps a css statement somewhere?

  12. kmessinger
    Moderator
    Posted 3 years ago #

    In the editor for posts, switch to html and copy the above code into it. Do not switch to the visual editor. Hit the publish button.

  13. kmessinger
    Moderator
    Posted 3 years ago #

    perhaps a css statement somewhere?

    Is your current iframe coming from css?

  14. tosok
    Member
    Posted 3 years ago #

    no, but I noticed in the WordPress theme I'm using they are two extra css files... ie.css and ie6.css

    I was thinking maybe some sort of style thing would work that is specific for ie. I really don't have a clue.

    I can change the background to another color in the body tag of the source file and that will display in IE8, but not a transparent background.

    I am using the iframe plugin which is grabbing a db driven php page as it's source. Don't know if that helps.

    I did try pasting the above code into the html editor. Nothing displayed then... no text at all.

    Thanks for trying.

  15. kmessinger
    Moderator
    Posted 3 years ago #

    I did try pasting the above code into the html editor. Nothing displayed then... no text at all.

    Strange, that is exactly how I tested it on IE 7, 8 and 9.

    The two css files you see for IE are conditional files and should have no effect.

    How do you enter text for a post? This is a post is it not?

  16. esmi
    Forum Moderator
    Posted 3 years ago #

    I was thinking maybe some sort of style thing would work that is specific for ie.

    I think that conditional comment CSS might be a more effective route for you. You serve use transparent gifs or whatever up to various versions of IE (or even change the display completely) whilst keeping the original CSS for the more standards-compliant browsers.

  17. tosok
    Member
    Posted 3 years ago #

    Thanks for all who put their minds on this. Good news! The fix is now quick and simple. Just install the latest version of iframe (1.1.0) and the problem is resolved. I sent an email to the plugin developer and he took the issue on right away and solved it. The result, transparent backgrounds no longer show up as white in IE8!

    I highly recommend this iframe plugin - not just for it's ease of use, or the IE white background fix, but for the stellar support.

    Thanks Vitaly!

  18. tosok
    Member
    Posted 3 years ago #

    By the way, I was still having some problems with one of my pages showing white background in IE8. In our case, we were importing a page where we could access the code, so I added this to my source page:

    body {
    background-color: transparent;
    }

    That with the new iframe plugin v1.1.0 - http://wordpress.org/extend/plugins/iframe/ - took care of it.

Topic Closed

This topic has been closed to new replies.

About this Topic