Im having a real problem setting a div to resize with the browser. The div works in mozzila but not in IE. The div is within a container div, but 230 pixels down(red div in code). I also dont know why min hight and width dont work?
Please can some one help!!!!
orginal 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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--html,body {
height: 100%;
width: 100%;
min-width: 760;
min-height: 420;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
height: 100%;
width: 100%;
min-width: 760;
min-height: 420;
margin: 0px;
padding: 0px;
}
#mainArea{
background-color: #E5E5E5;
display: block;
position: absolute;
left: 1%;
top: 1.33%;
right: 1%;
height: 97.34%;
width: 98%;
min-width: 760;
min-height: 420;
z-index: auto;
bottom: 1.33%;
overflow: hidden;
}
#header{
position:relative;
left: 0.5%;
top: 4px;
right: 0.5%;
height: 25px;
width: 99%;
background-image: url(../images/top_bar_bg.gif);
background-repeat: repeat-x;
z-index: 1;
}
#mainimage{
position:relative;
left: 0.5%;
top: 6px;
right: 0.5%;
height: 175px;
width: 99%;
background-color:#290918;
background-repeat: no-repeat;
z-index: 1;
background-image: url(../images/computer.jpg);
background-position: left;
}
#mainContent{
position:absolute;
left: 0.5%;
right: 0.5%;
width: 99%;
background-color:#FF0000;
z-index: auto;
bottom: 1.33%;
top: 230px;
overflow: auto;
}
-->
</style>
</head>
<body>
<div id="mainArea">
<div id='header'>
</div>
<div id='mainimage'></div>
<div id='menu'>
</div>
<div id='mainContent'>
</div>
</div>
</body>
</html>
Please can some one help!!!!
orginal 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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--html,body {
height: 100%;
width: 100%;
min-width: 760;
min-height: 420;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
height: 100%;
width: 100%;
min-width: 760;
min-height: 420;
margin: 0px;
padding: 0px;
}
#mainArea{
background-color: #E5E5E5;
display: block;
position: absolute;
left: 1%;
top: 1.33%;
right: 1%;
height: 97.34%;
width: 98%;
min-width: 760;
min-height: 420;
z-index: auto;
bottom: 1.33%;
overflow: hidden;
}
#header{
position:relative;
left: 0.5%;
top: 4px;
right: 0.5%;
height: 25px;
width: 99%;
background-image: url(../images/top_bar_bg.gif);
background-repeat: repeat-x;
z-index: 1;
}
#mainimage{
position:relative;
left: 0.5%;
top: 6px;
right: 0.5%;
height: 175px;
width: 99%;
background-color:#290918;
background-repeat: no-repeat;
z-index: 1;
background-image: url(../images/computer.jpg);
background-position: left;
}
#mainContent{
position:absolute;
left: 0.5%;
right: 0.5%;
width: 99%;
background-color:#FF0000;
z-index: auto;
bottom: 1.33%;
top: 230px;
overflow: auto;
}
-->
</style>
</head>
<body>
<div id="mainArea">
<div id='header'>
</div>
<div id='mainimage'></div>
<div id='menu'>
</div>
<div id='mainContent'>
</div>
</div>
</body>
</html>
