Log in

View Full Version : iframe positioning problem in IE


micsten
04-11-2005, 06:18 PM
Hello,
I'am having problems getting an iframe to display correctly within a DIV in IE. It looks fine in FireFox, but not in IE (the iframe is displayed below the Div somehow).

The layout I am working with consists of a header div, left div, content div and a footer div. The content div contains the iframe, this seems to be the problem in IE.

Can anyone help me please?

here's my css:



body{
background-image: url(../bgImages/bg.jpg);
background-repeat: repeat;
}
#container {
width: 783px;
\width: 803px;
w\idth: 783px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#header {
height:92px;
padding: 0;
margin-bottom: 0;
background: #B08F0C url(../bgImages/header.jpg);
}

#content {
padding: 0;
margin-left: 133px;
height: 429px;
width: 650px;
}

#navLeft {
float: left;
width: 133px;
\width: 133px;
w\idth: 133px;
margin: 0;
margin-right: 0;
padding: 0;
background-color: #AF8E0B;
background-image: url(../bgImages/navLeft.jpg);
height: 429px;
}

#footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: #AF8E0B;
height: 65px;
background-image: url(../bgImages/Footer.jpg);
}


here's my html:


<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header"></div>

<div id="navLeft"></div>

<div id="content">
<iframe id="ifrm" name="ifrm" src="intro.htm" scrolling="yes" width="650" height="429" frameborder="0">
</iframe>
</div>

<div id="footer"></div>
</div>
</body>
</html>


any help appreciated, this is driving me nuts!
Thanks,
Micsten
jscheuer1
04-11-2005, 07:14 PM
Take the </div> tag from navLeft and place it after the one for content:
<body>
<div id="container">
<div id="header"></div>

<div id="navLeft">

<div id="content">
<iframe id="ifrm" name="ifrm" src="leaves.html" scrolling="yes" width="650" height="429" frameborder="0">
</iframe>
</div></div>

<div id="footer"></div>
</div>
</body>The way you had it, IE was showing the iframe where it was placed. I have no idea why FF showed it where it did but, it shows it correctly with this change so, enjoy!
micsten
04-11-2005, 08:03 PM
ahhh, can't believe i didn't try that.. I must have spent two hours trying every other possible thing. guess i got caught up in thinking it was a prob with the css.

Odd it displayed correctly in FF before the change.

Thanks a lot man,
micsten