...

View Full Version : Transparent Frame / Image in Internet Explorer 6 or 7



Mike Collins
12-28-2006, 12:43 AM
Hi

I am having trouble with my transparent "image" in Internet Explorer.

If you look on my webpage www.powerizerz.com/trans.html you will see that I have an Iframe with a transparent frame "image" laid over it. The problem is the "image" is not transparent in Internet Explorer, it is purple and does not allow the iframe below to be viewed.

If you look at it in Mozilla it works correctly.

The code I used is below. If you can offer any insight into how I can make the frame transparent in Internet Explorer please let me know.

Thank You!

Credit user: harbingerOTV

for the code below






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css">
a {
position: relative;
width: 400px;
height: 500px;
display: block;
}
span.frame {
/*background: transparent;*/
background: #d9c;
position: absolute;
width: 384px;
height: 484px;
top: 0;
left: 0;
z-index: 2;
display: block;
-moz-opacity: .30;
}

</style>

</head>
<body>
<a href="http://www.ebay.com" target="_blank"><span class="frame"></span>
<IFRAME src="http://www.ebay.com" width="400" height="500"
scrolling="auto" frameborder="1">
</IFRAME>
</a>
</body>
</html>

Arbitrator
12-28-2006, 12:46 AM
Why do you double post? This is answered in the original thread here (http://www.codingforums.com/showpost.php?p=518017&postcount=5).

Mike Collins
12-28-2006, 06:57 AM
Thank You Arbitrator!

Mike Collins
12-28-2006, 06:59 AM
Hello All

Here is the correct code, please do not spend your time on this problem it has been solved!

this code was added in to allow transparency in Internet Explorer>>>>>

filter: alpha(opacity=30

see below



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css">
a {
position: relative;
width: 400px;
height: 500px;
display: block;
}
span.frame {
/*background: transparent;*/
background: #d9c;
position: absolute;
width: 384px;
height: 484px;
top: 0;
left: 0;
z-index: 2;
display: block;
-moz-opacity: .30;
filter: alpha(opacity=30);
}

</style>

</head>
<body>
<a href="http://www.ebay.com" target="_blank"><span class="frame"></span>
<IFRAME src="http://www.ebay.com" width="400" height="500"
scrolling="auto" frameborder="1">
</IFRAME>
</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum