Iframe and div: lower part of iframe cutoff

lindm · August 23, 2008

I am combining a div setup with an iframe but the iframe gets cutoff corresponding to the height of the top menu. No clue to why. Please see 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body{height:100%;	
background: #2756A2 url(bilder/xbody_bg.png) repeat-x top center;
} 

* html #container{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}
body{
margin:0;
padding:0;
overflow: hidden;/*No scroll*/


}




#container {
width: 820px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
height:100%;

}
  
#left {
  float: left;
  width: 20px;
  background-image:url(bilder/xleft.png);
  background-repeat:repeat-y;
  height:100%;
}

#middle {
  margin-left: 20px;
  margin-right: 20px;
  height:100%;
  background-color:#FFFFFF;


}
#logo {
background-image:url(bilder/xtopmenu.png);
background-repeat:no-repeat;
height:65px;
width:100%;
text-align: right;
vertical-align: bottom;

}
#main {
  height:100%;
  width:100%;
  padding:0px;

}

#right {
  float: right;
  width: 20px;
  background-image:url(bilder/xright.png);
  background-repeat:repeat-y;
  height:100%;
}
#topmenu{
background-image: url(bilder/xmenu.png);
background-repeat: repeat-x;
background-position: left top;
width:780px;
height:23px;
padding: 2px;

}

.menu1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal;
color: #FFFFFF;
vertical-align: bottom;
padding: 6px;
}

.px10{
font-size:10px;
}
-->
</style>
</head>
<body>

<div id="container">
<div id="left"><img src="bilder/xlefttop.png" width="20" height="252"></div>
<div id="right"><img src="bilder/xrighttop.png" width="20" height="252"></div>
<div id="middle">
<div id="logo">
</div>

<div id="topmenu">
</div>


<div id="main">
<iframe height="100%" width="100%" src="http://www.dmi.dk" frameborder="0"></iframe>
</div>

</div>
</div>

</body>
</html>

Any ideas to why much appreciated. Tested on Safari 3 and Firefox 3

Sign In

Iframe and div: lower part of iframe cutoff

Recommended Posts

lindm

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information