Hi 
I'm having a bit of trouble getting with getting the css height function to work properly in firefox. I've got a centre (with margins set to auto) div which i'm trying to set the height of to 100%, and then put a shadow background on either side of it.
For some reason firefox is not liking this at all, even after i put height: 100% in the body tag as well as the centre div
Also ... how can I set the footer to be at the bottom of a page even if the page contents doesn't fill the height of the screen, I set the footer div to position: absolute; bottom: 0; which was fine in IE but doesn't work in firefox as it isn't relative to the rest of the page content.
I've posted the html & css below,
Thanks for any help
I'm having a bit of trouble getting with getting the css height function to work properly in firefox. I've got a centre (with margins set to auto) div which i'm trying to set the height of to 100%, and then put a shadow background on either side of it.
For some reason firefox is not liking this at all, even after i put height: 100% in the body tag as well as the centre div
Also ... how can I set the footer to be at the bottom of a page even if the page contents doesn't fill the height of the screen
, I set the footer div to position: absolute; bottom: 0; which was fine in IE but doesn't work in firefox as it isn't relative to the rest of the page content.I've posted the html & css below,
Thanks for any help
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" title="default" href="styles.css" />
<title>Page Test</title>
</head>
<body>
<div id="wrap">
<div id="wrap2">
<div id="header"><img src="logo.jpg" alt="Logo" width="131px" height="57px" /></div>
<div id="leftcol">
<ul>
<li><a href="index.asp?pg=home" title="Home">Home</a></li>
<li><a href="index.asp?pg=about" title="About">About</a></li>
<li><a href="index.asp?pg=programme" title="Programme">Programme</a></li>
<li><a href="index.asp?pg=speakers" title="Speakers">Speakers</a></li>
<li><a href="index.asp?pg=seminars" title="Seminars">Seminars</a></li>
<li><a href="index.asp?pg=forums" title="Forum">Forums</a></li>
</ul>
</div>
<div id="rightcol">
<% pg=Request.QueryString("pg")
If pg = "" Then %>
<!--#include file="home.asp"-->
<% Elseif pg = "home" Then %>
<!--#include file="home.asp"-->
<% Elseif pg = "about" Then %>
<!--#include file="about.asp"-->
<% Elseif pg = "programme" Then %>
<!--#include file="programme.asp"-->
<% Elseif pg = "speakers" Then %>
<!--#include file="speakers.asp"-->
<% Elseif pg = "seminars" Then %>
<!--#include file="seminars.asp"-->
<% Elseif pg = "forums" Then %>
<!--#include file="forums.asp"-->
<% End If %>
</div>
<div id="footer">
<img src="img3.jpg" alt="Img 3" width="140px" height="30px" />
<img src="img4.jpg" alt="Img 4" width="140px" height="38px" />
<img src="img2.jpg" alt="Img 2" width="100px" height="34px" />
<img src="img1.jpg" alt="Img 1" width="34px" height="36px" />
</div>
</div><!--End of #wrap2-->
</div><!--End of #wrap-->
</body>
</html>
Code:
/* CSS Document */
body
{
margin: 0;
padding: 0;
height: 100%;
font: normal 10pt arial, helvetica, sans-serif;
background: #1e508f;
color: #1e508f;
}
#wrap
{
margin: 0 auto;
padding: 0;
width: 770px;
height: 100%;
font: normal 10pt arial, helvetica, sans-serif;
background: #ffffff url('graphics/shadowbg.gif') repeat-y;
color: #1e508f;
}
#wrap2
{
margin: 0 30px 0 30px;
padding: 10px 0 10px 0;
width: 710px;
font: normal 10pt arial, helvetica, sans-serif;
background: #ffffff;
color: #1e508f;
}
#header
{
margin: 0;
padding: 0 0 10px 0;
width: 710px;
border-bottom: 1px solid #80bd48;
}
#leftcol
{
margin: 10px 0 10px 0;
padding: 0;
float: left;
width: 200px;
}
#rightcol
{
margin: 10px 0 10px 0;
padding: 0;
float: right;
width: 510px;
/*height: 450px;*/
background: #ffffff url('graphics/sqbg.png') no-repeat bottom right;
}
#footer
{
margin: 0;
padding: 10px 0 0 0;
width: 710px;
clear: both;
text-align: center;
border-top: 1px solid #80bd48;
}
#footer img
{
margin: 0 30px 0 30px;
border: 0;
}
#leftcol ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#leftcol li
{
padding: 5px 0 5px 0;
}
#leftcol li a:link
{
padding: 10px 0 10px 15px;
font: normal 10pt arial, helvetica, sans-serif;
background: #e5edde;
color: #80bd48;
text-decoration: none;
display: block;
width: 130px;
}
#leftcol li a:visited
{
padding: 10px 0 10px 15px;
font: normal 10pt arial, helvetica, sans-serif;
background: #e5edde;
color: #80bd48;
text-decoration: none;
display: block;
width: 130px;
}
#leftcol li a:hover
{
padding: 10px 0 10px 15px;
font: normal 10pt arial, helvetica, sans-serif;
background: #fce5d2;
color: #80bd48;
text-decoration: none;
display: block;
width: 130px;
}
#leftcol li a:active
{
padding: 10px 0 10px 15px;
font: normal 10pt arial, helvetica, sans-serif;
background: #e5edde;
color: #80bd48;
text-decoration: none;
display: block;
width: 130px;
}
h2
{
font: normal 16pt arial, helvetica, sans-serif;
color: #1e508f;
}
... after going through article upon article on positioning footers a bit of mucking about was all it took 
