PDA

View Full Version : CSS + Iframe going to another page?



xxParfait
Oct 12th, 2009, 03:24 AM
Hello!

I thank you in advanced for all your help! I have created a layout with CSS and was trying to arrange my Main Content Box over the background image which I had no problem positioning, unfortunately I can't figure out why it is linking to the wrong page. (It is linking to my updates page although I have specifically marked my main.html to show up.

Layout HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="mistyle.css" />

</head>

<body>
<div class="nav">
<img src="navigation1.png">
</div>

<div class="header">
<img src="header1.png">
</div>

<div class="main">
<img src="main1.png">
</div>


<div class="updates">
<img src="updates1.png">
</div>

<div class="main2">
<iframe src="main.html" name="main" width="431" height="291" frameborder="0" scrolling="no"></iframe>
</div>

<div class="updates2">
<iframe src="updates.html" name="updates" width="449" height="70" frameborder="0" scrolling="no"></iframe>
</div>


</body>
</html>


My Layout CSS



body
{
background-color:#1c1a25;
width: 630px;
height: 567px;
font-style : normal;
font-weight : normal;
font-size : 8pt;
font-family : verdana;
color:#FFFFFF;
text-decoration : none;
}

a
{
color: #000000;
text-decoration: none;
}

a:link
{
text-decoration: underline;
color:#b3529a;}
}

a:visited
{
text-decoration: underline;
color:#6466ca;}
}

a:active
{
text-decoration: underline;
color:#b3529a;
}

a:hover
{
text-decoration: underline;
color:#f9a4e1
}


div.header
{
background: no-repeat;
margin-top: -567px;
margin-left: 430px;
}


div.nav
{
background: no-repeat;
margin-top: 20px;
margin-left: 300px;
}

div.main
{
background: no-repeat;
margin-top: 10px;
margin-left: 430px;

}

div.main2
{
position: absolute;
margin-top: -450px;
margin-left: 451px;
width: 431px;
height: 291px;
overflow:inherit;

}

div.updates
{
background: no-repeat;
margin-top: 10px;
margin-left: 435px;

}

div.updates2
{
position: absolute;
margin-top: -89px;
margin-left: 451px;
width: 449px;
height: 73px;
overflow:inherit;
}


My Main Page



<html>
<head>

<link rel="stylesheet" type="text/css" href="textstyle.css" />

</head>

<body>

Welcome to <b>Magically Insane</b>; my personal site!
<p>
Here you will find out more about myself, and a collection of the work that I do!

</body>
</html>


My Text CSS



body
{
background-color:#494d5b;
font-style : normal;
font-weight : normal;
font-size : 8pt;
font-family : verdana;
color:#FFFFFF;
text-decoration : none;
}

a
{
color: #000000;
text-decoration: none;
}

a:link
{
text-decoration: underline;
color:#b3529a;}
}

a:visited
{
text-decoration: underline;
color:#6466ca;}
}

a:active
{
text-decoration: underline;
color:#b3529a;
}

a:hover
{
text-decoration: underline;
color:#f9a4e1
}


What is showing up:
http://img.photobucket.com/albums/v341/spiraled_444/help-1.png

So I can't figure out why my updates page is loading in both div's when one is linked to main and the other is linked to updates.

xxParfait
Oct 12th, 2009, 08:31 AM
Please Note: I checked the site in IE and the page seems to come up the right one there but in FireFox it stays as the updates page showing up! :S I am very confused as to what is causing this.