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:

Code:

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:

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">
<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:

HTML Code:

<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

Thread: iframe positioning problem in IE

Thread Tools

Search Thread

iframe positioning problem in IE

Bookmarks

Bookmarks

Posting Permissions