Forum Moderators: not2easy
So I have this footer div that I want flush with the bottom of the browser window. I don't have any nested divs. I just have divs on the page one after the other, then the footer on the bottom.
On all pages except a really super long page, the footer is hanging in the middle of the page, and not flush at the bottom. And only in Firefox. in IE it's just fine.
The page code:
<body><div class="header">
<img src="includes/images/webheader.jpg">
</div> <!-- End div header -->
<div class="leftnavigationMenu">
<?require_once("includes/general/GlossaryLeftMenu.php");?>
</div> <!-- End div leftnavigation_menu -->
<div class="contentWide">
<?require_once("includes/general/GlossaryCenterContent.php");?>
</div> <!-- End div content -->
<div class="counter">
<?require_once("includes/counter.inc");?>
</div>
<div class="footer">
</div>
</body>
And the CSS for the footer and counter:
.counter {
margin:0 auto;
}.footer {
bottom:0;
margin:0 auto;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
padding-bottom: 0px;
background-color: #336699;
height=17px;
background-image: url(../includes/images/footer.gif);
}
I'm testing the footer CSS, trying to get everything to flush to the bottom of the browser window in FF and nothing seems to work.
.footer {
bottom:0;
1. margin:0 auto;
2. margin-bottom: 0px;
3. margin-top: 0px;
4. padding: 0px;
5. padding-bottom: 0px;
background-color: #336699;
height=17px;
background-image: url(../includes/images/footer.gif);
}Numbers 1,2,3, why do you have it this way? You are repeating what you have for the top and bottom margin. when you write margin in shorthand as you did in #1, the first value that you have written will take care of the top and bottom, the second value that you have written, takes care of the right and left (the auto)
Now with padding, the first rule you have written, in #4, that sets the padding to all four sides. You don't need to set the padding bottom as you have it set.
Now another thing you need to be careful of is that IE is forgiving of css mistakes. This could be a coding mistake in your styles, or this could just be a typo error, IE will still show the page as you think it will be displayed. The other browsers won't.
So, now that I have this taken care of, please post more of your styles for us to look at.
4CSS!
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Validation saves many frustrating hours!
