March 15, 201016 yr Hi there I've been working on a new site and have just noticed a problem. I've tried to get to the bottom of it but I'm not sure I can. The design uses the sticky footer technique, and even when the content is shorter than the height of the page, there is about 10-15px worth of vertical scroll. I think it might be to do with the top transparency bar of the content area: .top-transparent-stripe { width: 800px; height: 10px; background-color: #fff; filter:alpha(opacity=75); -moz-opacity:0.75; -khtml-opacity: 0.75; opacity: 0.75; } The height of the scroll is about 10px or so. If i change the value of height from 10px to 0, the scroll decreases but is still there. It goes to about 1-3px in height. But, of course, I still want that transparency bar there and it's not a total fix anyway. I've tried setting it to a padding and margin height of 10px and height to 0 etc, but to no avail. It's only a small thing, and it might even turn out that all the pages have enough content for this not to be an issue, but I'd like to get it sorted because it's irritating me and I like things to be perfect. The preview URL is: http://79.170.44.132/rivingtonbowlingclub.co.uk/ which is currently stuffed with filler text. Any help would be gratefully received!
March 15, 201016 yr I don't think you've coded the sticky footer properly. The body, html and wrapper are all height: 100% and the footer is coded after (outside) the wrapper correctly. The wrapper has a push div as the last item inside it with the same height as the footer - again correct. The footer needs a negative margin-top equal to its height because it would normally sit below the height: 100% of wrapper (below the window), so it has to be dragged back up over the push div. Try adding margin-top: -30px to #footer.
March 23, 201016 yr Author Apologies for the delay in repsonse, I had set this thread to email me on replys but it obviously didn't happen! What you said makes sense, and I tried adding the -30 top margin to .footer, but it didn't do anything. I find that really strange. I'd love to know what's wrong here; in all liklihood it wont matter due to the length of the likely amount of content on each page surpassing most resolution heights, but I can get a bit obsessive over this kind of thing and hate leaving things unanswered. I'll go throught he code carefully again and see if I can find what's going on here.
March 23, 201016 yr In this code I've deleted all the content except the push div and the footer and coded the wrapper with a green background and the footer does stick to the bottom with margin-top: -30px; also the -30px margin bottom for wrapper needs deleting. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="crispstylesheet100315.css" media"all" /> <base href="http://79.170.44.132/rivingtonbowlingclub.co.uk/" /> <title>Welcome To Rivington Bowling Club - RivingtonBowlingClub.com</title> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/cycle.js'></script> <script type='text/javascript' src='js/rivington.js'></script> </head> <body> <div class="wrapper"> <div class="push"></div> </div> <!--end of #wrapper--> <div class="footer"> <p>Copyright ©2010 Rivington Bowling Club. All Rights Reserved.</p> <p><a href="#">Terms & Conditions</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact</a></p> </div> </body> </html> .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto;/*was 0 auto -30px;*/ width: 808px; background: green url(images/wrapper_shadow.png) repeat-y; } .footer { margin-top: -30px; background: lime url(images/header_bg.png) repeat-x; height: 30px; width: 800px; margin-left: 4px; line-height: 14px; color: #ffffff; text-align: center; } Test the above and then add back the content and see where the problem is. When the content fills the page, the footer should stay under the content and you have to scroll to see it.
Create an account or sign in to comment