height not working like I want... [Archive]

BigToque

02-05-2005, 08:55 PM

My page looks fine in IE, but it doesn't work in FF. (although I'm sure FF is rendering it "correctly" and it's my code that isn't standards complient and IE is just assuming what I want)

I only noticed this once I dropped my resolution to 800x600.

As you can see, FF only renders the main div to 100% of the height of the screen, and anything that falls below 100%, the background doesn't show.

How can I fix this?

Page (http://www.bigtoque.com/test)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Mackie Bay Huts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="hutsstyle.css"/>
</head>

<body>
<div id="wrapper">
<div id="logo">
<img src="images/hutsLogo.jpg" alt="Mackie Bay Huts"/>
</div>

<div id="navbar">
<a href="index.php">Home</a>
<a href="schedule.php">Schedule</a>
<a href="stats.php">Stats</a>
<a href="profiles.php">Profiles</a>
<a href="http://forums.bigtoque.com" target="new">Forums</a>
<a href="about.php">About</a>

<div id="valid">
<p>
<a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!"/></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"/></a>
</p>
</div>
</div>

<div id="main">
<img src="images/imgTeamLogo.gif" alt="Mackie Bay Huts"/><img src="images/imgHuts.gif" alt="Mackie Bay Huts"/>

<div id="news">
<img src="images/imgNews1.gif" alt="News"/>
<?
PHP removed for ease of readibility
?>
</div>

<div id="recap">
<img src="images/imgRecaps1.gif" alt="Recaps"/>
<?
PHP removed for ease of readibility
?>
</div>
</div>
</div>
</body>
</html>

CSS File (http://www.bigtoque.com/test/hutsstyle.css)

/*huts.bigtoque.com Stylesheet*/

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
background-color: #3a6ea5;
color: #666666;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
}

#wrapper{
background-color: #3a6ea5;
height: 100%;
width: 780px;
}

#logo{

}

#navbar {
margin-top: -3px;
width: 125px;
float: left;
}

#navbar a:link, #navbar a:visited {
display: block;
color: #7e7e7e;
background-color: #ffffff;
border-bottom: 1px solid #000000;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
text-align: center;
font-weight: bold;
}

#navbar a:hover {
background-color: #dedede;
}

#valid a:link, #valid a:visited, #valid a:hover {
display: block;
background-color: #3a6ea5;
border: 0px;
}

#main {
width: 633px;
height: 100%;
background-color: #ffffff;
float: left;
margin-top: -91px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 10px;
background: url(images/bgPage.jpg);
}

#main h1 {
text-align: center;
}

/*#main img{
margin-left: 25px;
}*/

#news {
width: 292px;
float: left;
padding: 10px;
padding-top: 0px;
background-color: #dedede;
}

#news ul{
margin: 10px;
font-size: .9em;
}

#recap {
width: 292px;
float: right;
padding: 10px;
padding-top: 0px;
background-color: #dedede;
}

#recap ul{
margin: 10px;
font-size: .9em;
}

/*
#footer {
background-color: #ffffff;
clear: both;
}

#footer p {
font-size: .6em;
text-align: center;
}

#footer img {
padding: 10px;
vertical-align: middle;
}
*/

table, tr, td{
border: 1px solid #000000;
}