I have a web page I am creating with an iFrame. Every div below the iframe disappears. In this case, it's the div "footer"
I've tried several things with the css, and it did nothing.
This is the site:
http://t-down.webs.com/pre/home.html
Here is my HTML code:
<!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">
<!-- Designed by Ocular Designs. ocular.zzl.org -->
<head>
<title>Touch Down - Home</title>
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body>
<div id="banner"></div>
<div id="nav">
<div class="links_wrap">
<a href="home.html" class="home"></a>
<a href="members.html" class="members"></a>
<a href="wars.html" class="wars"></a>
<a href="http://touchdown.freeforums.org/" class="forums" target="_blank"></a>
</div>
</div>
<div id="content_wrap">
<div id="content">
<p class="welcome"></p>
<p class="intro">Welcome to the European gaming organization, Touch Down.
Touch down was founded on 18th of February, 2011 by Quicksilver, Ojje and H1, and is a result of DpN and Exterminate combined.
This clan was made to bring a lot of different styled gamers to each come to know each other and take gaming to the next level.
I guess this clan has the same goal as all of the other clans have out there, to become and to stay as the greatest clan ever.
We respect all other gaming communities and hopefully we will get some respect back from them in events such as wars.
We only allow skilled players into this clan with a respectful atitude, remember that we only play these games for fun.
We are a strict anti-hacking clan, we forbid any hackers or cheaters from joining Touch Down. We offer you a group with great teamspirit, where you will be coached to bring out the best of you.
Most of our members have 4+ years of experience in the game. If you are tempted by this offer to join our force, do not hesitate to contact any of our admins to try out.
In Touch Down, you will find many talented players, such as Quicksilver, Ojje, H1, Vein, Jzuo, Norri, Bbs, Matty and much more.</p>
</div>
<div id="side_wrap">
<div id="server_bar"><p class="servers"></p>
<div class="sa_ql_wrap">
<a href="http://www.xgenstudios.com/game.php?keyword=stickarena" class="sa" target="_blank"></a>
<a href="http://www.quakelive.com/" class="ql" target="_blank"></a>
</div>
<div class="cod_halo_wrap">
<a href="http://www.callofduty.com/" class="cod" target="_blank"></a>
<a href="http://halo.xbox.com/" class="halo" target="_blank"></a>
</div>
</div>
<div id="side_bars"><p class="news"></p> <iframe src="iframes/news.html" frameborder="0" width="217" height="90" allowtransparency="true" scrolling="no"/>
</div>
</div>
</div>
<div id="footer"></div>
<!-- Rollover Preloads -->
<a href="#" class="home_pre"></a>
<a href="#" class="members_pre"></a>
<a href="#" class="wars_pre"></a>
<a href="#" class="forums_pre"></a>
</html>
Here is my CSS code:
/* Designed by Ocular Designs. ocular.zzl.org */
body {
background-color:#171717;
background-image:url(../images/bg.png);
background-position:center;
font-family:Arial;
text-align:center;
}
#banner {
margin-left:auto;
margin-right:auto;
margin-top:-10px;
width:782px;
height:176px;
background-image:url(../images/banner.png);
opacity:0.7;
filter:alpha(70);
}
#nav {
margin-left:auto;
margin-right:auto;
width:782px;
height:50px;
background-image:url(../images/nav2.png);
opacity:0.8;
filter:alpha(80);
}
#content_wrap {
margin-left:auto;
margin-right:auto;
width:782px;
height:auto;
overflow:auto;
}
#content {
width:500px;
height:auto;
float:left;
background-image:url(../images/content_bg.png);
opacity:0.9;
margin-top:5px;
}
#side_bars {
width:276px;
height:auto;
background-image:url(../images/side_bar_bg.png);
opacity:0.9;
margin-top:7px;
float:right;
}
#server_bar {
width:276px;
height:auto;
background-image:url(../images/side_bar_bg.png);
opacity:0.9;
margin-top:5px;
overflow:hidden;
float:right;
}
#side_wrap {
width:276px;
height:auto;
float:left;
margin-left:5px;
}
p.intro {
margin-left:10px;
margin-right:10px;
}
#footer {
width:782px;
height:50px;
background-color:red;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
/* Images */
p.welcome {
margin-left:auto;
margin-right:auto;
width:137px;
height:45px;
background-image:url(../images/welcome.png);
margin-top:0px;
margin-bottom:0px;
}
p.news {
margin-left:auto;
margin-right:auto;
width:213px;
height:45px;
background-image:url(../images/announce.png);
margin-top:0px;
margin-bottom:0px;
}
p.servers {
margin-left:auto;
margin-right:auto;
width:124px;
height:45px;
background-image:url(../images/servers.png);
margin-top:0px;
margin-bottom:0px;
}
.sa_ql_wrap {
margin-left:auto;
margin-right:auto;
width:128px;
height:64px;
}
a.sa {
margin-left:auto;
margin-right:auto;
width:64px;
height:64px;
background-image:url(../images/sa2.png);
display:block;
float:left;
}
a.ql {
margin-left:auto;
margin-right:auto;
width:64px;
height:64px;
background-image:url(../images/ql.png);
display:block;
float:left;
}
.cod_halo_wrap {
margin-left:auto;
margin-right:auto;
width:150px;
height:57px;
margin-bottom:10px;
}
a.cod {
margin-left:auto;
margin-right:auto;
width:77px;
height:57px;
background-image:url(../images/cod.png);
display:block;
float:left;
}
a.halo {
margin-left:auto;
margin-right:auto;
width:73px;
height:47px;
background-image:url(../images/halo.png);
display:block;
float:left;
}
/* Navigation Links */
a.home {
width:73px;
height:49px;
background-image:url(../images/home.png);
display:block;
float:left;
}
a.home:hover {
width:73px;
height:49px;
background-image:url(../images/home_hover.png);
display:block;
float:left;
}
a.home_pre {
width:73px;
height:49px;
background-image:url(../images/home_hover.png);
display:block;
float:left;
display:none;
}
a.members {
width:107px;
height:49px;
background-image:url(../images/members.png);
display:block;
float:left;
}
a.members:hover {
width:107px;
height:49px;
background-image:url(../images/members_hover.png);
display:block;
float:left;
}
a.members_pre {
width:73px;
height:49px;
background-image:url(../images/members_hover.png);
display:block;
float:left;
display:none;
}
a.wars {
width:68px;
height:49px;
background-image:url(../images/wars.png);
display:block;
float:left;
}
a.wars:hover {
width:68px;
height:49px;
background-image:url(../images/wars_hover.png);
display:block;
float:left;
}
a.wars_pre {
width:73px;
height:49px;
background-image:url(../images/wars_hover.png);
display:block;
float:left;
display:none;
}
a.forums {
width:93px;
height:49px;
background-image:url(../images/forums.png);
display:block;
float:left;
}
a.forums:hover {
width:93px;
height:49px;
background-image:url(../images/forums_hover.png);
display:block;
float:left;
}
a.forums_pre {
width:73px;
height:49px;
background-image:url(../images/forums_hover.png);
display:block;
float:left;
display:none;
}
.links_wrap {
margin-left:auto;
margin-right:auto;
width:341px;
height:49px;
}
I can't continue with this problem, and I need the iFrame there.