...

View Full Version : height not working like I want...



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;
}

mindlessLemming
02-05-2005, 10:04 PM
You could use min-height for good browsers and height for IE. (but you will still have problems in Safari)

html, body { min-height:100%; }
* html, * html body {height:100% /* IE ONLY */ }

This rule will fix safari:
html, body { display:table-cell }

:)

BigToque
02-05-2005, 10:57 PM
Thanks for the help.

This part:

* html, * body {height: 100%; /* IE ONLY */ }

Helps in all the situations except one.

When you click on this link here (http://www.bigtoque.com/test/recaps.php?id=39) you can see that any time the content is less than 100% of the height of the screen, the DIV only extends to the height of the content. (this only happens in FF)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum