Here's my source. It works fine in IE7 but in FF the div just wont stretch even with min height 100%. Whenever the content is longer than the viewport the left side doesnt stretch all the way down.
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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
background-color: #999;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(bg.jpg);
height: 100%;
}
#wrapper {
width: 780px;
background-color: #e3e3e3;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
min-height: 90%;
}
body {
height: 100%;
}
#header {
background-image: url(banner.jpg);
background-repeat: no-repeat;
float: left;
height: 88px;
width: 780px;
border-right-width: 0px;
border-left-width: 0px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000;
border-left-color: #000;
}
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
background-image: url(barbg.jpg);
background-repeat: repeat;
float: left;
height: 100%;
width: 179px;
padding-left: 0px;
font-style: normal;
color: #FFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#navcontent {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFF;
height: auto;
width: 170px;
padding-top: 7px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 6px;
text-align: left;
}
#bottombar {
background-image: url(bottombar.jpg);
height: 13px;
width: 179px;
float: left;
}
#news {
background-color: #e3e3e3;
float: right;
width: 599px;
}
#body {
background-color: #e3e3e3;
float: left;
height: auto;
width: 780px;
margin: 0px;
min-height: 100%;
}
#navbanner {
background-image: url(navbar.jpg);
height: 32px;
width: 179px;
float: left;
}
#leftbar {
width: 179px;
}
#subbottom {
width: 179px;
background-color: #e3e3e3;
float: left;
min-height: 100%;
}
#newsbanners {
background-image: url(news.jpg);
background-repeat: no-repeat;
float: right;
height: 42px;
width: 601px;
}
#bungienews {
float: left;
width: 292px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #000;
padding: 3px;
}
#mlgpro {
float: right;
width: 292px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #000;
padding: 3px;
}
#bungiemlgnews {
height: 200px;
width: 601px;
}
#breaker {
background-image: url(breaker.jpg);
float: left;
height: 18px;
width: 601px;
}
#body {
background-color: #e3e3e3;
float: right;
height: 100%;
width: 601px;
margin-top: 0px;
margin-right: 0px;
}
#mid {
margin: 0px;
width: 780px;
background-color: #E3E3E3;
min-height: 100%;
}
.general {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#footer {
background-repeat: no-repeat;
width: 780px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000;
border-left-color: #000;
background-color: #E3E3E3;
min-height: 10%;
}
#content {
padding: 5px;
float: left;
height: auto;
width: 575px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style></head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="mid">
<div id="body">
<div id="newsbanners"></div>
<div id="bungiemlgnews">
<div id="bungienews"> Content for id "bungienews" Goes Here</div>
<div id="mlgpro"> Content for id "mlgpro" Goes Here</div>
</div>
<div id="breaker"></div>
<div id="content">
<p>
<?php
$cmd = $_GET['cmd'];
if ($cmd=="") { $cmd = "page1.php"; }
switch($cmd)
{
case "page1":
@include('page1.php');
break;
case "page2":
@include('page2.php');
break;
case "page3":
@include('page3.php');
break;
case "staff":
@include('staff.php');
break;
}
?>
</p>
<p>Content for id "content" Goes Here </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="leftbar">
<div id="navbanner"></div>
<div id="navbar">
<div id="navcontent"> Index<br />
<a href="http://forum.halolegacy.com" target="_blank">Forum</a><br />
<a href="testing2.php?cmd=staff">Staff</a><br />
<a href="testing2.php?cmd=page1">About us</a><br />
<br />
General Story and Plot<br />
Campaign Tips and Tricks<br />
Game Review<br />
Weapons<br />
Vehicles<br />
<br />
Mutliplayer Tips and Tricks<br />
Maps<br />
Weapons<br />
Strategies<br />
Gameplay Reviews <br />
<br />
Links<br />
Contact us</div>
</div>
<div id="bottombar"></div>
</div>
<div id="subbottom"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Last edited by Mwiff; 11-20-2008 at 04:59 PM..
|
