• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5239
  • Last Modified:

White background on iframe showing in IE8 & Chrome

I having having alot of trouble trying to set a transparent background within iframes.

Everything shows fine in Firefox but Chrome and IE8 flash a white background before loading the page, you can see what I mean here...http://www.riad-hikaya.com/index3.html

On my Iframe page I am currently using the following code, you can see i'm trying everything here!

<script type="text/javascript">
document.getElementById('frame1').allowTransparency = true;


</script>
<!--[if IE]>
<style type="text/css">iframe {background: transparent;}</style>
<![endif]-->

<style type="text/css">        
body {
      background-repeat: repeat-x;
      background-color: transparent;

      background-position: center top;
      background-image: url(images/bg.jpg);
      margin-top: 0px;
}

iframe {
  background-color: transparent;
}
 

</style>
</head>

<body style="background-color: transparent;">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>     <iframe src="/enter.html" width="1062" height="645" scrolling="no" frameborder="0" id="frame1"  allowTransparency="true" backgound="transparent"></iframe></td>
  </tr>
  <tr>
    <td>  <iframe src="/music.html" width="1062" height="60"  frameborder="0" scrolling="no" allowTransparency="true"></iframe></td>
  </tr>
</table>
</body>
</html>



The pages that are showing through the iframe have a css body class of

body {
      background:none transparent;
}


But none of this is working, any ideas?
0
BrighteyesDesign
Asked:
BrighteyesDesign
  • 5
  • 5
1 Solution
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
Try hiding the iframe until it fully loads. The below should do it.

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="/enter.htm" > </iframe>
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
The above may not work all the time. It only works the first time the iframe is loaded. So clicking further may still display the white box.

Another option is to use the below jquery.

$(“iframe”).load(function() {
$(this).css(“visibility”, “visible”);
});
$(“iframe”).ready(function() {
$(this).css(“visibility”, “hidden”);
});

Javascript needs to be enabled for this to work however. The previous one will work if javascript is disabled.
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
If you want, you can also change the colour of the white flash so it more closely matches your background. This isn't what you requested, but may be useful.
Basically you just add a style="background-color: #777;" to the iframe tag. Just change the colour code to whatever you want.

Example
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';background-color: #777; " src="/enter.htm" > </iframe>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
BrighteyesDesignAuthor Commented:
Thanks for that, both options still show the white background.

Here's the link...http://www.riad-hikaya.com/index5.html

The code i'm using on the iframepage is... (I tried with both of the codes you suggested and ust the javascript one)

<script type="text/javascript">
$("iframe").load(function() {
$(this).css("visibility", "visible");
});
$("iframe").ready(function() {
$(this).css("visibility", "hidden");
});
</script>

<style type="text/css">        
body {
      background-repeat: repeat-x;
      background-color: transparent;

      background-position: center top;
      background-image: url(images/bg.jpg);
      margin-top: 0px;
}

iframe {
  background-color: transparent;
}
 


</style>
</head>

<body>
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>     <iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';"
 src="/enter.html" width="1062" height="645" scrolling="no" frameborder="0"  allowTransparency="true" background="transparent"></iframe></td>
  </tr>
  <tr>
    <td>  <iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="/music.html" width="1062" height="60"  frameborder="0" scrolling="no" allowTransparency="true"></iframe></td>
  </tr>
</table>
</body>
</html>
0
 
BrighteyesDesignAuthor Commented:
It even stays white when a background colour is added...http://www.riad-hikaya.com/index6.html


 <iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';"
 src="/enter.html" width="1062" height="645" background-color: "#777" scrolling="no" frameborder="0"  allowTransparency="true" background="transparent"></iframe>
0
 
BrighteyesDesignAuthor Commented:
I have just discovered that if I remove

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

from the the page within the iframe the white background does not appear?

I need those scripts though, any idea why this would happen and how to get round it?
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
Without seeing what is in the AC_RunActiveContent.js it will be hard to discern.
I would suggest that the script listed is slowing something down on the page enough to delay the iframe load.

As the style for visibility and colour are listed on the iframe tag, the CSS may be interfering (and vice versa). Try disabling the CSS for the iframe and see if that makes a difference (may not though). I'd also get rid of the transparency settings to start with as a test.
0
 
BrighteyesDesignAuthor Commented:
Thanks for your help,not solved yet but helped me get closer to figuring this out
0
 
BrighteyesDesignAuthor Commented:
This is now narrowed down to a Javascript conflict i'm going to post a more specific question in that zone...
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
No worries, glad to lend assistance. I'm sure the java experts will sort this out.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now