davideo7
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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>
ASKER
The problem is in Firefox. That doesn't help.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This didn't fix the problem but it certainly helped.
ASKER