Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Footer of website fine in Internet Explorer but doesn't appear at bottom of FireFox

Posted on 2008-10-17
4
Medium Priority
?
310 Views
Last Modified: 2013-12-07
The footer of my website here
http://www.mybiblegames.com/games.php
Appears to be fine in Internet Explorer but in FireFox, it doesn't appear to be at the bottom of the page.  How can I fix this?  It also doesn't appear right in a few other browsers either.

Attached in the CSS code
@charset "utf-8";
/* CSS Document */
 
* {
	margin: 0;
}
 
html{
height:100%;
}
 
body{
	background-image:url('images/background.png');
	background-position:center;
	background-attachment:fixed;
	text-align:center;
	background-position:bottom;
	vertical-align:top;
	border:none;
	border-width:0;
	margin:0;
	padding:0;
	margin-top:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	height:100%;
}
 
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -38px; /* the bottom margin is the negative value of the footer's height */
}
 
 
.siteFrame{
	border:none;
	border-width:0;
	width:764px;
	padding:0;
	text-align:left;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	background-image:url('images/header.jpg');
	background-position:top;
	background-repeat:no-repeat;
	background-color:white;
}
 
 
 
/* Links */
a{
	color:#b0a310;
	font-weight:bold;
	text-decoration:underline;
}
a:hover{
	color:#7e896e;
	text-decoration:overline underline;
}
a:active{
	color:#426ae1;
	text-decoration:none;
}
a:visited{
	color:#897f0c;
}
 
 
 
/* Formated Text */
.contentSmallTitle{
	font-size:12px; 
	font-weight:bold; 
	color:white;
}
 
 
 
/* A content Box that fills the entire page horizontally */
.contentBox{
	background-image:url('images/contentBorder.png'); 
	width:754px;
}
.contentBoxInside{
	background-color:white; 
	width:740px; 
	text-align:left; 
	padding:4px;
}
.contentBoxShadow{
	width:754px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.bibleVerse{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	text-align:center;
}
 
 
 
/* A divided Content Box */
.divContentBox{
	width:764px;
}
.divLeftBox{
	margin: 0 0 0 5px; 
	float:left;
}
.divLeftBoxBorder{
	background-image:url('images/contentBorder.png'); 
	width:374px;
}
.divLeftBoxInside{
	background-color:white; 
	width:360px; 
	height:262px; 
	text-align:left; 
	padding:4px;
}
.divLeftBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
.divRightBox{
	margin: 0 0 0 381px;
}
.divRightBoxBorder{
	background-image:url('images/contentBorder.png'); 
	background-position:right; width:374px;
}
.divRightBoxInsideNonPadded{
	background-color:white; 
	width:368px; 
	text-align:left;
}
.divRightBoxInside{
	background-color:white; 
	width:360px; 
	text-align:left; 
	padding:4px;
}
 
.divRightBoxShadow{
	width:374px; 
	height:8px; 
	background-image:url('images/contentBorderShadowBottom.gif'); 
	background-repeat:repeat-x;
}
 
 
/* Footer Related */
.footer{
	background-position:bottom;
	width:764px; 
	background-image:url('images/footerBackground.gif');
	background-repeat:repeat-x;
	height:38px;
	color:#cccbe7;
	font-size:12px; 
	vertical-align:bottom;
	line-height:1;
}
.push {
	height: 38px; /* .push must be the same height as .footer */
}
a.footerLinks{
	color:#e0ddc0;
	font-weight:bold;
	text-decoration:none;
}
a:hover.footerLinks{
	color:#c0c2e0;
	text-decoration:none;
}

Open in new window

0
Comment
Question by:davideo7
  • 2
4 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 22745149
It's not working because you're using the obsolete "center" element which is getting in the way. So remove it and give the footer auto left and right margins:

.footer {
	background-position: bottom;
	width: 764px;
	background-image: url('images/footerBackground.gif');
	background-repeat: repeat-x;
	height: 38px;
	color: #cccbe7;
	font-size: 12px;
	vertical-align: bottom;
	line-height: 1;
	margin: 0 auto;
}

Open in new window

0
 
LVL 4

Expert Comment

by:Joachim Carrein
ID: 22745314
Hello davideo7,

i wrapped another div around the footer div with class footerholder and added this to the css file
which worked.

.footerholder{
      position: absolute;
      bottom: 0;
      width: 100%
}

Regards,

joachimcarrein
0
 

Author Closing Comment

by:davideo7
ID: 31507277
And surprisingly that did it!
Thank you!!
0
 
LVL 43

Expert Comment

by:David S.
ID: 22746358
@davideo7

> And surprisingly that did it!
> Thank you!!

You're welcome. You're surprised? It's a fairly common technique and I often use a variant of it.

The problem was that the "center" element didn't have a set height, so the min-height on ".wrapper" was effectively being ignored.


@joachimcarrein:  While that would work, it's better to avoid adding extra elements when you can.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question