V4.master Sticky Footer With Undocked Ribbon

August 26, 2010

Hi,

This is actually my first blog post and it’s about my first real frustration and moment of joy with SharePoint 2010.

This week I wanted to insert a “sticky” footer to my masterpage (v4.master). For two days I have tried to get it working on Internet Explorer and Firefox, but for some reasons it always came out as a disappointment. Sometimes it was only working in Firefox and vice versa.

Today I wanted to retry and took a new copy of my v4.master page and made a clean html file with a working “sticky” footer layout. This layout is based on the one of Ryan Fait. After that I inserted everything from the original v4.master page.

It was trial and error, but I made it to the end. I finally succeeded getting the footer where HE should be!

Most of the problems were related to the SharePoint Dialog window. In Firefox it only show scrollbars and could not see the content. In Internet Explorer the dialog rendered correctly but the content was gone. After removing the "v4master" id from the body, things got a lot easier. I used a few Internet Explorer CSS selectors to get it working.

Here is my HTML starters code.

After the changes the CSS looks like this.

Here are a few screenshots of the sticky footer in action.

SharePoint Sticky Footer Example Image

Footer on a OOTB Team Site

SharePoint Sticky Footer Example Image 2

Footer on the bottom of a long page.

SharePoint Sticky Footer Example Image 3

The footer is not shown in the dialog windows.

Here is the masterpage zip file:

v4_Sticky_Footer.master

This version is tested in IE7, IE8, IE9, and Firefox v3+.

Changes

Update: 30/05/2012

Vinod noticed that this solution was not workfing correctly for IE7. Therefor I have updated the CSS and master page file, so that the solution now also works for IE7.

Comments