Jump to content

Footer Not Appearing


Milque
 Share

Recommended Posts

Hello.When I put absolute positioning in my div layers (except for the "footer" layer), my footer automatically disappears. Then I tried absolute positioning the "footer", but it appears without the text and is positioned all wrongly (somewhere in the middle of the layout).Also, my layout looks (almost) perfect in Firefox, but in IE, the header is 'off', as in it's placed a little to the left.Here's an example:Test PageHere's the stylesheet:

body { background-color: #d2d2d2; background-image: url(images/containerbg.jpg); background-position: center; background-repeat: repeat-y; background-attachment: scroll; cursor: default; padding: 0; margin: 0; text-align: center; height: 100%}#container{ width: 780px; background-image: url(images/containerbg.jpg); background-repeat: repeat-y; background-attachment: scroll; margin: 0px auto; text-align: left; overflow: auto; z-index: 0}#header{ position: absolute; top: 0px; width: 780px; background-image: url(cow/cheader.jpg); float: left; z-index: 0}#left{ position: absolute; top: 274px; width: 584px; background: none; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif;  color: #666666; float: left; text-align: left; margin-left: 2px;}#leftcontent{ position: absolute; top: 200px; left: 20px; width: 564px; background-color: #ffffff; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif;  color: #666666; text-align: left; float: right; margin-right:11.5px;} #right{ position: absolute; top: 130px; left: 830px; width: 160px; background: none; font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif;  color: #666666; text-align: left; float: right; margin-right: 6px; z-index: 1}#footer{ width: 780px; height: 55px; background-image: url(images/footer.jpg); text-align: center; font: 7pt/11pt "Trebuchet MS", Arial, Verdana, sans-serif;  color: #666666; float: right; overflow: auto}

And here's the HTML:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>  Yours Truly, Qis</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="styles.css" /></head><body><div id="container"><!-- BEGIN HEADER --><div id="header"><img src="images/cheader.jpg" width="780" height="474" alt="banner" /> </div><!-- END HEADER --><!-- BEGIN CONTENT --><div id="left"><div id="leftcontent">Welcome message!  This is where I post! </div></div><!-- END CONTENT --><!-- BEGIN NAVIGATION --><div id="right"><h1>About Me</h1><p>Basic things about me. </a><h1>Navigate</h1>+ <a href="http://">Link</a><br><!-- END NAVIGATION --></div><!-- BEGIN FOOTER --><div id="footer"><b>Site</b> © <a href="mailto:YOU@DOMAIN.COM">Qis</a> | All Rights Reserved |<b>Design</b> © Qis</div><!-- END FOOTER --></div></body></html>

So how can I make my footer appear and placed at the bottom of the page properly? And how do I make the header be aligned properly in IE like it does in Firefox?Thanks in advance.

Link to comment
Share on other sites

Thanks for the link, it made my footer visible now, but it still won't go to the bottom of the page. Instead, it messes up my layout. Here's what I mean:Another test pageAnd here's my styles for "container" and "footer":

#container{ position: relative; width: 780px; background-image: url(images/containerbg.jpg); background-repeat: repeat-y; background-attachment: scroll; margin: 0px auto; text-align: left; overflow: auto; min-height: 100%; height: auto !important; height: 100%; z-index: 0}#footer{ width: 100%; position: absolute; bottom: 0 !important; bottom: -1px; background-image: url(images/footer.jpg); text-align: center; font: 7pt/11pt "Trebuchet MS", Arial, Verdana, sans-serif;  color: #666666; float: right; height: 55px}

Can you tell me where I went wrong? Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...