Solved

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

Posted on 2008-10-17
4
300 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 42

Accepted Solution

by:
David S. earned 500 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:joachimcarrein
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 42

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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 …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now