Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

White background on iframe showing in IE8 & Chrome

Posted on 2011-09-06
10
4,954 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

 

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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

840 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