Milque Posted April 14, 2006 Share Posted April 14, 2006 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 More sharing options...
Little Goat Posted April 14, 2006 Share Posted April 14, 2006 well, first maybe your other divs are on top of the footer.LG Link to comment Share on other sites More sharing options...
SillyBilly Posted April 14, 2006 Share Posted April 14, 2006 well, first maybe your other divs are on top of the footer.LG<{POST_SNAPBACK}> Look at this linkhttp://www.themaninblue.com/writing/perspective/2005/08/29/ Link to comment Share on other sites More sharing options...
Milque Posted April 15, 2006 Author Share Posted April 15, 2006 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 More sharing options...
playmenow Posted April 16, 2006 Share Posted April 16, 2006 I never heard of 'bottom' (alone) & 'min-height' Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now