Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question http://www.littleaboutalot.com/
If the footer is positioned absolutely, then the above is NOT occuring (the div above can't be pushing down on anything in the footer)... unless... Something which is absolutely positioned is positioned so in relation to its last positioned (other than static) parent. Is it possible that the parent is changing size and you've referenced the footer to either the bottom or the right side? That would be the only instance I can think of where the div above could affect the footer.
Hi, then I think thats the case (if I am understanding correctly), because the wrapper is position relative. So the footer is positioned relative to it. So is this maybe my problem. And I found out it's only a fireox issue.
O-MY-GOD, I am going crazy! I just sat here for the last hour trying every different possible solution - nothing worked. I tried changing everything to absolute measurements, I tried placing it in another div within the footer div and giving it every different position, I tried taking the margin bottom away from the content div and putting another div above the footer of same height, I tried every different combination of line-height/padding/margin/negative margin in combo with padding, margin, and line-height. Nothing worked cross article. The only thing they all have in common (the common being something changing the height of the copyright) is something above the copyright in the content div. That is where the problem lies. Unfortunately, I can find no differences between the articles - because there is none - the code is the exactle the same. UGH! So basically I think I am focusing on changing something with the copyright, but the copyright is the effect not the cause.
I branched out - this problem now lives in eight different forums, and no body can find a solution. Here is what we have narrowed it down to now. It is most likely a rounding error, however, the copyright only moves when there is enough content to exceed the 100% min-height. SuzyUK from over at WebMasterWorld Forum has been so kind, and really did some digging into the code. She did not find the solution but she did give me this - which is - a simplified working version, that recreates the problem with a minimal amount of code to trouble shoot. Hopefully this helps some one help me find a solution. Here is SuzyUK code and part of what she said. What I do know: it only happens on pages with enough content to exceed the 100% min-height. The footer and paragraph themselves does not move it is simply the vertical-alignment of the text. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Short Page</title> <style type="text/css"> <!-- html, body {margin: 0; padding: 0; height: 100%;} body { /*font: 62.5%/1 "Times New Roman", Times, serif;*/ font: 12px arial, serif; background-color: #fff; color: #333; } #wrapper { position: relative; z-index: 1; min-height: 100%; border: 1px solid #000; background: #ffc; } #content { margin: 0px 150px 50px 150px; line-height: 1.4; /*line-height: 1.5;*/ } #footer { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 788px; width: 90%; background-color: #abc; text-align: center; line-height: 1.5; } #footer p { background: #fff; margin: 5px 10px; padding: 0; } --> </style> </head> <body> <div id="wrapper"> <div id="content"> Diabetes, as it relates to blood sugar <br> </div> <div id="footer"> <p>some footer text</p> </div> </div> </body> </html> To create the longer page, repeat the line in bold approximately 32+ times - might need a few more. Now with 2 different pages open (1 long 1 short), click back and forth and look at the footer text - you will see it move.
Well, FF does have rounding errors if you use decimals... Maybe you want to keep the page to 100% height and have overflow:auto on the main container and overflow: hidden on an inside one? Then your page at least isn't min-height: 100% but simply height: 100%?
You might look at footer locked at bottom demo for a simple method. Works in FF, IE6&7, Opera and Konqueror/Safari. cheers, gary
Alright!!! Overflow auto on the footer and I gave the footer an em based height - that kept the vertical scroll bar away when you increase the text size. Done! Fixed! I have to give SuzyUK (over at web master world) her credit though - I could not have done it with out her. We went back and forth 44 times. http://www.webmasterworld.com/css/3597067.htm And I see that Stomme poes also said the same- you were right - that did it - thanks guys for your help! Take care!
Suzy does a lot of hard work building and testing stuff... I'm much too lazy to do all that work usually... she's also signed up here as Suzy and as cssangel at csscreator too. We need more gurus here at DP.
At CSSCreator, her nick has been updated to Suzy. She is an amazingly knowledgeable person. cheers, gary