Forum Moderators: not2easy
I've got a really annoying problem with DIVs of a class inside an iframe. As long as the page is not in the iframe it is aligned as I expect it to be, top left with no margin or padding. Once it is loaded in the iframe it moves down a good few pixels but only in ie.
I've tried adjusting margin and padding on every ID and every class but to no avail. If anyone has any idea about this I would be very grateful indeed!
this is the html page:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>selection</title>
<link href="styles/selection.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="modelHolder">
<div class="modelItem"><a href="details.php?mID=9&pic=2"><img src="images/tn_1.jpg " /><p>Model 1</p></a></div>
<div class="modelItem"><a href="details.php?mID=7&pic=3"><img src="images/tn_2.jpg " /><p>Model 2</p></a></div>
<div class="modelItem"><a href="details.php?mID=12&pic=3"><img src="images/tn_3.jpg " /><p>Model 3</p></a></div>
<div class="modelItem"><a href="details.php?mID=6&pic=3"><img src="images/tn_4.jpg " /><p>Model 4</p></a></div>
<div class="modelItem"><a href="details.php?mID=13&pic=2"><img src="images/tn_5.jpg " /><p>Model 5</p></a></div>
<div class="modelItem"><a href="details.php?mID=10&pic=2"><img src="images/tn_6.jpg " /><p>Model 6</p></a></div>
</div>
</body>
</html>
this is the CSS for it...
body
{
margin:0px;
padding:0px;
width:790px;
}
#modelHolder
{
position: absolute;
left:0px;
top:0px;
width:753px;
height:463px;
padding:0px;
margin:0px;
background-color:#000000;
}
.modelItem
{
float:left;
padding:0px 30px 15px 0px;
margin:0px 0px 0px 0px;
text-align:center;
font:Verdana, Arial, Helvetica, sans-serif;
color:#999999;
}
.modelItem a:link img, .modelItem a:visited img,
.modelItem a:hover img, .modelItem a:active img
{
border:0px;
color:#999999;
}
.modelItem a:link p, .modelItem a:visited p,
.modelItem a:hover p, .modelItem a:active p
{
border:0px;
color:#999999;
text-decoration:none;
margin:0px;
padding:8px 0px 0px 0px;
}
this all gets loaded into an iframe which is in the following 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Models</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="images/header.gif" />
</div>
<div id="contentHolder">
<div id="menuBar">
<p class="otherSections"><a href="index.php">about us</a> </p>
<p class="otherSections"><a href="contact.htm">contact</a> </p>
<p class="actualSection"><a href="#">main models</a> </p>
<p class="otherSections"><a href="models_2.htm">craft models</a> </p>
<p class="otherSections"><a href="#">other models</a> </p>
<p class="otherSections"><a href="#">credits</a> </p>
</div>
<div id="glassPane">
<iframe id="scenic" src="http://myServer/selection.php" frameborder="0" ></iframe>
</div>
</div>
</body>
</html>
and finally the css for the page containing the iframe:
body
{
margin:0px;
padding:0px;
}
#contentHolder
{
margin:0px;
padding:0px;
}
#menuBar
{
position:absolute;
left:38px;
top:117px;
max-width:167px;
text-align:right;
margin:0px;
padding:0px;
}
.otherSections a:link, .otherSections a:visited,
.otherSections a:hover, .otherSections a:active
{
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;
text-decoration:none;
right:0px;
}
.actualSection a:link, .actualSection a:visited,
.actualSection a:hover, .actualSection a:active
{
color:#259549;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
right:0px;
}
#glassPane
{
position:absolute;
left:198px;
top:117px;
}
#scenic
{
margin:0px;
padding: 0px 0px 0px 0px;
width:820px;
height:500px;
overflow:hidden;
border:0px;
}
I know it's a lot to ask in a first post, but I would truly be so thankful if anyone had any idea why it is going wrong in ie6.
I have never used iframes, because I don't like pages with holes in it. Also, I'm not sure if <iframe> is a valid xhtml tag. But maybe it is for transitional. Just a few suggestions.
In xhtml, you have to set the margins and padding for 'html' too. So you could try adding this to your framed pages:
html {
margin:0
padding:0;
}
Actually you should add that to all your xhtml pages' CSS. Some browsers may have default values for html margin and padding.
Also, there is an attribute called 'framespacing'. It was meant to make space between frames in real framesets, like cellspacing in a table, nut maybe there's a default value in IE that you have to set to 0 (I'm on a Mac, can't test it). Worth a try?
I am surprised it has taken me so long to come across this forum, what a repository of knowledge and helpful people!
I'll give your suggestions a try and let you know :D
It works perfectly aas long as the iframe isn't there, as soon as the html page is in the iframe it moves down a number of pixels in IE only thus ruining my grid...
I'll cut out a lot of the code from my original post and hope that it helps get a resolution to this most frustrating problem..
emecks.
