Link to home
Start Free TrialLog in
Avatar of davideo7
davideo7Flag for United States of America

asked on

Make an Iframe and all it's content transparent

I have a chat box which I made and when a user submits a message, message gets submitted to an iframe.  Now the iframe is transparent but when you submit a message or receive a message, it blinks white which means, for a brief second it's not transparent but instead has a white background, this is not a problem in Internet Explorer, just Firefox.  How can I fix this?

If you want to test out what I mean, go here and send a few messages
http://www.vizzed.com/vizzedboard/retro/playtest.php?id=8874
But you'll need to register first here
http://www.vizzed.com/vizzedboard/index.php
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of davideo7

ASKER

albacom: When I apply that css to the iframe, it gets rid of the white stuff but it also gets rid of the content within the iframe.  How can I make the layer of the iframe's content get dynamically placed on to the parent iframe so that it's not being affected by the alpha of it's own frame?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Still doesn't help.
Try  allowtransparency="true" on the iframe like in the example below.

Just to make sure: Is your problem in IE or Firefox?
Main page with an Iframe as msg box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Transparent iframe</title>
<style type="text/css">
#main_wrapper{
margin:0 auto;
width:80%;
height:800px;
background:#6600CC;
position:relative;

}
#chatbox{
margin:0px;
padding:0px;
width:260px;
height:380px;
border:#666666 7px solid;

position:absolute;
left:100px;
top:100px;
overflow-x:hidden;
overflow-y:scroll;
}
</style>
</head>

<body>

<div id="main_wrapper">
	<iframe id="chatbox" src="chatboxText.html" allowtransparency="true">
	<p>Your browser does not support iframes.</p>
	</iframe>
</div>

</body>
</html>


//Iframe content page  ... chatboxText.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body style="width:80%; /*Remove horizontal scrollbar on IE6*/">
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
<p id="text">This is a message from: .... </p>
</body>
</html>

Open in new window

The problem is in Firefox.  That doesn't help.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This didn't fix the problem but it certainly helped.