Solved

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

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
How to calculate height of a text using jquery 3 40
White space in figure / img 4 18
Table doesn't show the lines! 3 23
Validating number not work with decimal 4 23
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

713 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