View Full Version : transparent iframe is not transparent


HeatherAshley
07-11-2005, 04:00 AM
the site is www.kidnappedsoul.net/frame.html

I have a transperant iframe layout but one of them is not transparent

here is the code!


<STYLE type="text/css">
<!--
BODY
{
direction:;
background-attachment:fixed;
scrollbar-arrow-color: ffffff;
scrollbar-track-color: 333333;
scrollbar-face-color: 333333;
scrollbar-highlight-color: 333333;
scrollbar-3dlight-color: 333333;
scrollbar-darkshadow-color: 333333;
scrollbar-shadow-color: 333333;
}
-->
</STYLE>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- BODY { background-color: transparent; } -->

MaGiCSuN
07-11-2005, 06:59 AM
change your frame.html to this:


<html>
<head>
<link rel="stylesheet" href="redgreen.css" type="text/css">
</head>
<body bgcolor="#333333" text="#000000">
<div style="position: absolute; top: 1px; left: 0px; z-index: 1;">
<img src="layout.png" alt="Kidnapped Soul v. 1 Jennifer Garner">
</div>


<iframe name="navi" src="navi.html" width="105" height="73" allowtransparency="true" frameborder="0" scrolling="auto" style="position: absolute; top: 264px; left: 580px; z-index: 2;"></iframe>


<iframe name="main" src="main.html" width="234" height="232" allowtransparency="true" frameborder="0" scrolling="auto" style="position: absolute; top: 330px; left: 85px; z-index: 3;"></iframe>


</body>
</html>

change main.html to this:


<html>
<head>
<STYLE type="text/css">
<!--
BODY
{
background-attachment:fixed;
scrollbar-arrow-color: ffffff;
scrollbar-track-color: 333333;
scrollbar-face-color: 333333;
scrollbar-highlight-color: 333333;
scrollbar-3dlight-color: 333333;
scrollbar-darkshadow-color: 333333;
scrollbar-shadow-color: 333333;
background-color: transparent;
}
-->
</STYLE>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
text here
</body>
</html>


and change navi.html to this:


<html>
<head>
<STYLE type="text/css">
<!--
BODY
{
background-attachment:fixed;
scrollbar-arrow-color: ffffff;
scrollbar-track-color: 333333;
scrollbar-face-color: 333333;
scrollbar-highlight-color: 333333;
scrollbar-3dlight-color: 333333;
scrollbar-darkshadow-color: 333333;
scrollbar-shadow-color: 333333;
}
-->
</STYLE>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<b> Navigation</b>
<p>
<p>
<b>Victim</b><br> <i><a href="about.html">about me</a> <br> <a href="pic.html" target="main">pictures</a><br><a href="room.html" target="main">my room</a><br> <a href="handw.html" target="main">handwriting</a></i>
<p>
<b>Intruder</b><br> <i><a href="http://kidnapped-soul.zzn.com" target="new">email</a><br><a href="interact.html" target="main">interact</a><br><a href="reads.html" target="main">reads</a><br><a href="tuts.html">tutorials</a>
<p>
<b>Evidence</b><br><i><a href="blends.html" target="main">Blends</a><br><a href="layouts.html" target="main">Layouts</a><br><a href="textures.html" target="main">textures</a><br><a href="effects.html" target="main">Add effects</a>
<p>
<b>Crime Scene</b> <br> <i><a href="info.html" target="main">info</a><br><a href="host.html" target="main">host info</a><br><a href="hosting.html" target="main">hosting info</a></i>
</body>
</html>


and change your style.css to this:


BODY { background-color: transparent; }
A:link{ color: black; text-decoration: underline;}
A:visited{ color: black; text-decoration: underline;}
A:active{ color: gray; text-decoration: none;}
A:hover{ color: red; text-decoration: none;}

stylesheets should NEVER have <style></style> tags in them when it's a .css file.

i'm not saying this all would solve the problem, but you need to edit your coding anyways to make it "proper" coding :)

Love,
Mirna

HeatherAshley
07-11-2005, 07:42 AM
thank you!

it works now!