Solved

White background on iframe showing in IE8 & Chrome

Posted on 2011-09-06
10
5,000 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
[X]
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
  • 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
RoboForm Secure Password Management System

RoboForm Everywhere - Superb Browser Support
Windows / Apple / IOS / Android / Linux / Chrome OS
Use different complex passwords everywhere
Best Secure Password Management by far
Synchronize all of your devices instantly
Safe, Secure & Highly Recommended!

 

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

Increase your protection from Zero Day threats!

Running two Antivirus' is never a good idea.
Taking advantage of Multiple Security layers on the other hand can often save your hide.
See which top notch security software brands have been proven to happily coexist together.
Reduce your chances of becoming a statistic.

Question has a verified solution.

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

Suggested Solutions

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
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…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

738 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