I have this page that has layout like the following:
(no frameset)
----------------------------------------
| header |
|--------------------------------------|
| div1 | div2 |
| | |
|-------------------| |
| div3 | |
| | |
| |------------------|
| | div4 |
| | |
| | |
| | |
| | |
----------------------------------------
The page has to use all the browser space, without
having scrollbar in the outer page, if possible.
Also, Since I need to hide div2 and div3 in some
situation, I implemented it with 4 floating div.
Everything works fine in IE6. However, in Mozilla
(1.7.3), somehow the div1 and div3 overlapped.
You can see this by loading the source below into
Mozilla. I wonder if this is a bug in the Mozilla?
Also, does anyone has a solution that can be applied
to both IE6 and Mozilla?
Bryan
-------------- Start Source -----------------
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html style="width:100%; height:100%" xml:lang="en" lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Move Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" />
<style type="text/css">
.div1N {width:50%;height:20%;float:left;clear:left;}
.div2N {width:50%;height:50%;float:right;clear:right;}
.div3N {width:50%;height:80%;float:left;clear:left;}
.div4N {width:50%;height:50%;float:right;clear:right;}
.div1M {width:100%;height:20%;}
.div2M {float:none;display:none;}
.div3M {float:none;display:none;}
.div4M {width:100%;height:80%;}
</style>
<script language="javascript" type="text/javascript">
function Max_Normal(o)
{
var odiv1 = document.getElementById("div1");
var odiv2 = document.getElementById("div2");
var odiv3 = document.getElementById("div3");
var odiv4 = document.getElementById("div4");
if (odiv1.className == "div1N")
{
o.value ="Normalize";
odiv1.className = "div1M";
odiv2.className = "div2M";
odiv3.className = "div3M";
odiv4.className = "div4M";
}
else
{
o.value ="Maximize";
odiv1.className = "div1N";
odiv2.className = "div2N";
odiv3.className = "div3N";
odiv4.className = "div4N";
}
}
</script>
</head>
<body style="height:100%;width:100%; margin:0px; paddding:0px;
overflow:auto; vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>
<input type="button" value="Maximize" onclick="Max_Normal(this)" />
</td>
</tr>
<tr>
<td style="width:100%; height:100%;">
<div id="div1" class="div1N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td> div1</td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px red solid;">
<iframe id="if1" name="if1" src="select1.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div2" class="div2N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td> div2</td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px blue solid;">
<iframe id="if2" name="if2" src="select2.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div3" class="div3N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td> div3 <span style="background:red">(Div1 & Div3
overlapped in Mozilla)</span></td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px green solid;">
<iframe id="if3" name="if3" src="select3.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div4" class="div4N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td> div4<span style="background:green">(Div2 & Div4
OK)</span></td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px yellow solid;">
<iframe id="if4" name="if4" src="select4.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
-------------- end Source -----------------
