CSSLayout + Iframe [Archive] - Dynamic Drive Forums

fmrock

10-11-2007, 02:31 PM

Hey everyone, I have a full css layout and have removed the activeX control that was in the Chart Div. And put an IFRAME into that div. But now the IFRAME is moved way below the form and where it should be.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
margin: 0px;
padding: 0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
height:100%;
}

body {
margin:0px 0px 0px 0px;
height: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}

.Chart {
margin-left: 0px;
margin-right: 305px;
height: 99%;
border:solid;
border-width:2px;
}

.AddendumForm {
float: right;
padding: 0px 0px 0px 0px;
width: 305px;
height: 99%;
border:solid;
border-width:2px;
}
.AddendumForm form{
height:98%;
height: expression(document.documentElement.clientHeight*0.98-300+'px');
margin: 0px;
padding: 0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
}

.AddendumForm textarea{
width: 98%;
height:98%;
height: expression(document.documentElement.clientHeight*0.98-300+'px');
margin: 0px;
padding: 0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
background-color:#FFFFCC;
}

.container {
height: 100%;
}
.warning {
color: black;
font-weight: bold;
font-size: large;
border:solid;
border-style:solid;
border-width:thin;
border-color:#FF0000;
background-color:#CCCCCC;
width:50%;
heigth:50%;
margin: 50px 50px 50px 50px;
text-align:center;
}

.Addendum_already_added {
color: #FF0000;
font-weight: bold;
}

.chartloading {
width: 300px;
height: 200px;
background-color: #CCCCCC;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
text-align: center;
border-style:solid;
border-width:thin;
border-color:#000000;
display:none;

}

</style>
<style type="text/css" media="print">
div#container {
display:none
}

div#AddendumForm {
display:none
}

div#Chart {
display:none
}

object{
display:none;
}
</style>

</head>

<div class="container">
<div class="AddendumForm" id="AddendumForm"></div>
<div class="Chart" id="Chart"><iframe height="100%" width="100%" src="test.pdf">If you can see this, your browser doesn't understand IFRAME</iframe></div>
</div>
</body>
</html>

fmrock

10-11-2007, 02:33 PM

I forgot to mention, that this works in IE, but need it to work in Safari/Firefox also.. that is where it is added below it should be

fmrock

10-11-2007, 03:20 PM

If i set the IFRAME to be 98% height and width, it puts the ifram where it should.