6 replies [Last post]
skingdon
Offline
newbie
Last seen: 15 years 46 weeks ago
Timezone: GMT-7
Joined: 2003-11-04
Posts: 1
Points: 0

I am really stumped on how to make my iframe transparent Crying . 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>

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 19 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

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> 

http//melbourne.ug.php.net

smokey
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-18
Posts: 2
Points: 0

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

GlacierBlue
Offline
newbie
Last seen: 15 years 40 weeks ago
Joined: 2003-12-16
Posts: 2
Points: 0

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.

thijs
Offline
newbie
Last seen: 15 years 40 weeks ago
Joined: 2003-12-17
Posts: 3
Points: 0

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

smokey
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-18
Posts: 2
Points: 0

iframe transparency

Thank you both for your help!

beefshake
Offline
newbie
perth, australia
Last seen: 15 years 24 weeks ago
perth, australia
Timezone: GMT+8
Joined: 2004-04-04
Posts: 1
Points: 0

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