PDA

View Full Version : <div> positioning making problems in IE iframe



mac41
07-28-2005, 08:01 PM
I finally fixed the <div> positioning so that it worked the same in both IE and Mozilla, and have ended up with a very simple <div> positioning code. In IE, however, my iframe is acting very strangely, and the page being shown gets arranged funny. The way it ought to be has two images, one on top of the other, and then some text, the way IE shows it, though, everything is on the same line, the two images next to each other and then the text.

I checked that it wasn't from my style CSS within the <head> of the page, so it must be something I'm missing in my <div> tags.

This is the basic positioning code:



<head>
<style media="all" type="text/css">
html, body {
height: 100%; overflow: hidden;
}

#div1 { position: absolute; top: 0; left: 0; z-index: 1; }
#div2 { position: absolute; top: 0; left: 20; z-index: 1; }
#div3 { position: absolute; top: 130; left: 200; z-index: 1; }
#div4 { position: absolute; top: 145; left: 59; z-index: 1; }
#div5 { position: absolute; top: 70; left: 130; z-index: 1; }
#div6 { position: absolute; top: 531; left: 120; z-index: 1; }
</style>
</head>
<body>


<div id="div1">
Image
</div>

<div id="div2">
Image
</div>

<div id="div3">
Navigation
</div>

<div id="div4">
<IFRAME name="iframe" src="link" width=716 height=378 marginwidth=0 marginheight=0 frameborder=1 scrolling=auto></IFRAME>
</div>

<div id="div5">
Image
</div>

<div id="div6">
<IFRAME name="nav" src="link" width=600 height=19 marginwidth=0 marginheight=0 frameborder=0 scrolling=no></IFRAME>
</div>

</body>


The issue is only relevant to the first iframe, although I'm not sure if it effects the second. The pages shown in the second are only text to begin with, there's no positioning.

Can anyone see where the problem is? It works fine in Mozilla.

jatkinson10
08-01-2005, 08:35 PM
Try not using absolute positioning and use the box model to give the page it's layout. This will allow you to have a almost exact representation in both browsers. By using padding and margins I was able to place a I frame in this site that looks great in both FF and IE example (http://harpercreative.com/style/articles.php)


J.