Solved

Why doesn't this footer hug the bottom of the page?

Posted on 2013-06-26
3
411 Views
Last Modified: 2013-06-26
Head out to http://specialpromotionsinc.com/partner/home.php. On IE, it looks fine, but in Safari, the black footer is up towards the middle of the page.

I've played around with several things but have come up short. What am I missing? How can I get the footer to hug the bottom of the page in Safari as well as in IE?

Here's my stylesheet:

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 12px;
	color: #ffffff;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	min-height:100%;
	width: 100%;
	margin: 0;
	background-color:#ffffff;
}

#container {
min-height:100%;
position:relative;
}

#header {
margin: 0;
height:156px;
width:100%;
background-image: url(images/gradient.png);
background-repeat:repeat-x;
}

#top_graphics {
margin:auto;
width:1000px;
height:156px;
}

#wagon_wheel {
margin:auto;
width:1000px;
height:529px;
}

#content {
padding-bottom:35px;
min-height:100%;
}

#footer {
position:absolute;
bottom:0;
width:100%;
height:35px;   /* Height of the footer */
background-color:#000000;
clear:both;
}

#footer_text {
position:relative;
margin:auto;
text-align:center;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
padding-top:10px;
}

A.footer_text
{
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:none;
}

A.footer_text:Hover 
{
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}

A.footer_text:Visited
{
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:none;
}

Open in new window


...and here's my html:

<body>
<div id="container">
	<div id="content">
		<div id="header">
			<div id="top_graphics"><IMG SRC="images/top_graphics.png"></div>
		</div>
		<div id="content">
			<div id="wagon_wheel"><IMG SRC="images/wagon_wheel_colored.png" usemap="#wagon_wheel" border="0"></div>
		</div>
		<div id="footer">
			<div id="footer_text">For more information, contact <A HREF="mailto:steven@countryshowdown.com" class="footer_text">Steven Edwards</a>, <A HREF="mailto:mike@countryshowdown.com" class="footer_text">Mike Newton</a> or <A HREF="mailto:larry@countryshowdown.com" class="footer_text">Larry Wiater</a> or call 615.321.5130</div>
		</div>
	</div>
</div>
</html>

Open in new window

0
Comment
Question by:brucegust
  • 2
3 Comments
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39279177
Add this to your style sheet for html

html {
  ...
  height: 100%;
}
0
 

Author Comment

by:brucegust
ID: 39279440
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39280409
You are welcome - thanks for the points
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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 is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 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