Solved

White background on iframe showing in IE8 & Chrome

Posted on 2011-09-06
10
4,983 Views
Last Modified: 2012-06-27
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
Comment
Question by:BrighteyesDesign
  • 5
  • 5
10 Comments
 
LVL 18

Expert Comment

by:Rartemass
ID: 36492707
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
 
LVL 18

Expert Comment

by:Rartemass
ID: 36492714
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
 
LVL 18

Expert Comment

by:Rartemass
ID: 36492728
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!

 

Author Comment

by:BrighteyesDesign
ID: 36492736
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
 

Author Comment

by:BrighteyesDesign
ID: 36492754
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
 

Author Comment

by:BrighteyesDesign
ID: 36492823
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
 
LVL 18

Accepted Solution

by:
Rartemass earned 500 total points
ID: 36493165
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
 

Author Closing Comment

by:BrighteyesDesign
ID: 36494696
Thanks for your help,not solved yet but helped me get closer to figuring this out
0
 

Author Comment

by:BrighteyesDesign
ID: 36494779
This is now narrowed down to a Javascript conflict i'm going to post a more specific question in that zone...
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36494975
No worries, glad to lend assistance. I'm sure the java experts will sort this out.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html split(text) Part2 6 20
html form layout 4 33
Two decimal 5 25
How do I add counter to html listbox using jquery 2 22
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question