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

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

davideo7Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
David S.Connect With a Mentor Commented:
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
 
Joachim CarreinSr. Software DeveloperCommented:
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
 
davideo7Author Commented:
And surprisingly that did it!
Thank you!!
0
 
David S.Commented:
@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
All Courses

From novice to tech pro — start learning today.