Forum Moderators: not2easy

Message Too Old, No Replies

Footer positioning problem with Mozilla

         

joolsm

10:00 am on Aug 2, 2003 (gmt 0)

10+ Year Member



I have a problem with the positioning of my footer in mozilla. It all works OK in IE6, NN7 and Opera7 on Win 98SE. However, in Mozilla2, the footer is not at the foot of the page.

I've tried various ways round it (including taking it outside of the outer div), but Mozilla insists on displaying the footer about a third of the way down from the top of the page.

As I'm still on a steep learning curve with css, it's no doubt my fault, but I can't see why.

Please can anyone help? Thanks Jools

Strippped html and css files below:--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<!-- start of outer div -->
<div id="outer">
<!-- start of header div -->
<div id="hdr"></div>
<!-- end of header div -->
<!-- start of bar div -->
<div id="bar">
</div>
<!-- end of bar div -->
<!-- start of bodyblock div -->
<div id="bodyblock">
<!-- start of l-col div -->
<div id="l-col" align="left">
<!-- start of links div -->
<div id="links">
</div>
<!-- end of links div -->
</div>
<!-- end of l-col div -->
<!-- start of contmins div -->
<div id="contmins">
</div>
<!-- end of contmins div -->
</div>
<!-- end of bodyblock div -->
<!-- start of ftr div -->
<div id="ftr"></div>
<!-- end of ftr div -->
</div>
<!-- end of outer div -->
</div>
</body>
</html>

Main css file:-

#outer {
width: 98%;
}

#hdr {
height: 70px;
}

#bar {
height: 70px;
padding-left: 20px;
vertical-align : top;
border : none;
}

#bodyblock {
width: 100%;
position: relative;
height: 80%;
padding: 0px;
vertical-align : top;
margin-top: 10px;
}

#l-col {
float: left;
padding: 0px;
z-index: 1;
font-size: 1em;
vertical-align: top;
text-align: left;
height: auto;
width: 16%;
}

#contmins {
position: relative;

Menu css file:-

DIV#links {
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
position: absolute;
width: auto;
height: 400px;
background-color: #ffffff;
border: 2px #000080 solid;
left: 2px;
top: 25px;
}
font-size: 1em;
vertical-align: top;
width: 80%;
float: right;
height: 1px;
}

#ftr {
margin: 0px;
height: 70px;
display: block;
}

ShawnR

10:15 am on Aug 2, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A few suggestions:
  • Have you set the css attribs of body and html to have height: 100%?
  • You haven't closed the #contmins definition (although this might just be you being overzealous in creating a cut-down version to post)
  • How do you include the css files?

Shawn

joolsm

10:41 am on Aug 2, 2003 (gmt 0)

10+ Year Member



Shaun - answers in the order of your questions.

No - the heights are not set.

Yes - I was overzealous.

CSS files included by linking.

Jools

ShawnR

11:02 am on Aug 2, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



responses in the order of your responses ;)

  • Well, set them (when you say height: 80% (in #bodyblock), that is 80% of the containing block, not 80% of the window height. So you will need to set outer div and the <div align="center"> (Why is that there?) to height: 100% as well.
  • OK, good
  • (assuming the first point doesn't resolve it) can you be more specific. Paste the code snippet. (Just in case the problem is the browser not being able to access Menu css file, for example)

joolsm

3:14 pm on Aug 2, 2003 (gmt 0)

10+ Year Member



Shawn - many thanks for the advice. I've now put in heights (allowing for nesting) and everything works spot on.

Thanks again, Jools