Solved

White background on iframe showing in IE8 & Chrome

Posted on 2011-09-06
10
4,932 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 

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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Using jQuery to set a DIV attribute on page load 9 31
HTML5 save .Dat to server side 20 46
Increase the size of the modal in Bootstrap 5 25
Outlook opens HTML email as text 4 22
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

773 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