2 Replies Latest reply on Mar 11, 2010 4:04 PM by BillColeDesign

    PhatFusion Multibox vs. Sticky Footer


      I'm slowly losing my mind on this one.


      I picked up a site that needed to be properly rebuilt.  The site is using a stickfooter of a grass.png file.  I was able to get the sticky footer to work.  After I got it to work I created my dreamweaver template (dwt) and started building the rest of the site.


      Where it went wrong is on the pages that contain the lightbox tool known as phatfusion multibox.  The sticky footer doesn't work on any page that contains this div.  On each page that has the phatfusion div the footer no longer is "sticky" and remains right along side the bottom of the container div.  I wasn't able to find anywhere in the multibox CSS file where it shows any extra margins, padding, or sizing that would throw this off.  Can anyone help me figure out this problem?


      www.billcoledesign.com/outsideoc  (use this as an example of the working sticky footer)


      www.billcoledesign.com/outsideoc/nsi.php and click on the "operations" tab.  All tabs after "operations" have this problem.


      Thanks in advance for your help!

        • 1. Re: PhatFusion Multibox vs. Sticky Footer
          Ben M Adobe Community Professional

          Your problem is the footer.css document.  There are a couple problems.  First, negative margins are disallowed for padding and could result in problems for browsers.  Next there are min-heights defined here and what appears to be happening is that the body background is being printed to the longest measurement and the footer is always in the right place, but the body is not stopping in the right place.  If you want a footer to always be present on the screen like the following site: http://news.cnet.com , position the footer with position: fixed, and bottom: 0.  If you want it to be at the bottom and not scroll, positioning the footer to relative and placing it in the flow of the document after everything else, then it will always appear at the bottom, I don't really have a good example of this one though.

          • 2. Re: PhatFusion Multibox vs. Sticky Footer
            BillColeDesign Level 1

            Thanks for the response.


            The footer.css file comes straight from the sticky footer tutorial at http://www.cssstickyfooter.com/


            The footer works properly on the entire site except for the page that is using the PhatFusion Multibox.  I actually think the problem is within the PhatFusion Multibox CSS or JS files.  I just can't find where it is.