Tue, 2003-11-04 19:56
I am really stumped on how to make my iframe transparent 
. There is a lot about this on the net, but nothing works. Everybody (including MSDN) claims it should work on IE 5.5+. I am running IE 5.5 PC and it does not work.
Do you know how to do this? Here is the treatment I have been using. Is there something wrong with this?
Here is my index.html:
<html>
<body bgcolor="black" background="http://www.google.com/images/logo.gif">
<iframe width="300"
height="300"
name="Frame1"
src="insideIframe.html"
frameborder="0"
allowtransparency="true"
style="background-color:transparent; color:red; filter: alpha(opacity=20); border:5 solid #000000;">
</iframe>
</body>
</html>
Here is the src for frame.html:
<html>
<style type="text/css">
body {
filter: alpha(opacity=80, style=0);background-color: #FFFFFF; -moz-opacity:0.8;
}
</style>
<body>
Transparent??? afgasdfa
</body>
</html>
Wed, 2003-11-12 14:34
#1
iframe transparency
It definately works on IE 6.0
Unfortunately I don't have IE 5.x to test it. This is my code I have used to achieve it:
<!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>
<title>iframeTransparent</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
iframe {
background-color: transparent;
color: red;
filter: alpha(opacity=20);
border: 5px solid #000000;
}
-->
</style>
</head>
<body bgcolor="#000000" background="http://www.google.com/images/logo.gif">
</body>
</html>
<html>
<iframe width="300" height="300" name="Frame1" src="http://www.google.com" frameborder="0">
</iframe>
</body>
</html>
Tue, 2003-11-18 02:40
#2
iframe transparency
Thanks very much for publishing that, i've looked all over the net to get some info on the above. There is one more thing i'd like to be able to do to the transparent iframe, if someone could help me.
When i used your code everything was transparent, including the scroll bar. How would i keep everything transparent except for the scroll bar. I put this code in the frame page code.....
<title>testframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<Style>
<!--
BODY {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #669966;
}
-->
</style>....but it didn't seem to work.
Can anyone help?
Thanks
Tue, 2003-12-16 17:30
#3
Scrollbar Transparent
I would tell the IFrame not to have a scroll bar, but allow it to be scrollable and then create a scroll bar OUTSIDE of the IFrame in JavaScript with rollovers that moved the IFrame up or down.
There are tons of examples of JS scrollbars on the net.
Wed, 2003-12-17 13:17
#4
iframe transparency
try to use the code you mentioned in your first post, but set 'background-color:transparent' in frame.html instead of in the iframe-tag...
works for me at www.tg-design.nl/indexx.htm
next problem...weird anti-aliasing of bold tet in your transparent iframe...workig on that...
Thijs
Wed, 2003-12-31 20:22
#5
iframe transparency
Thank you both for your help!
Sun, 2004-04-04 16:57
#6
iframe transparency
thanks alot guys, helped me out big time with that. i had tried for hours to get rid of the ugly 3d frame i had on my website, but as soon as i tried some of your suggestions all was ok. this is a great source of information, ive signed up and hopefully can share some ideas with you too.
my website is www.beefshake.cjb.net
cya