Footer Not Aligning At Bottom Of Content In Print Preview

Question

To make a short story long, I'm in charge of fixing all these CSS issues of Microsoft SP. One is the inability for the content to print in FireFox (a well known bug that Mozilla seems it won't address). So I have to create a stylesheet specifically for FireFox so the content can print.

I already fixed the issue and it prints fine. The problem I'm having now is that the footer won't stay at the bottom of the content since the content has position: absolute (one of the fixes for the FF print bug).

Here's (roughly) the HTML code:

<div id="ncs">
 <div class="ncs_content">
  <div class="ncs_stage">
   <div class="ncs_stage_top">
    <div class="ncs_stage_content">content...</div>
   </div>
  </div>
 </div>
 <div class="ncs_footer">turned off content</div>
 <div class="ncs_footer_printed_date">print date that needs to be displayed</div>
</div>

My CSS:

#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }
.ncs_content { background: none; border: none; float: none; }
/* this fixes the FF bug */
.ncs_stage_content {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 90%;
    font-size: 14px;
    padding: 20px 0px;
    margin: 10px 0px;
    font-size: 120%;
    clear: both;
    display: block;
}
.ncs_footer { clear: both; height: 100%; position: relative; }

.ncs_footer_printed_date {
    float: left; 
    display: block;
    width: 950px;
    position: relative;
    bottom: 0;
    left: 0;
    clear: both;
    height: 120%;
    vertical-align: bottom;
}

I got it to print the footer on every page, but that's not good enough. They want it to print at the bottom of the content.

I've been struggling with this for a few days now so any ideas would be greatly appreciated. I am really good at CSS but when it comes to stupid issues with things that Microsoft makes, it's really frustrating.

Thanks for any advice!!!

Answer 1

Pardon me if I misunderstood, but what about using absolute positioning for the footer?

Answer 2

What if you moved the footer inside the content div? It should position itself at the bottom of the page.. (I know that this would break the logical structure of the document, but if it saves you of lot of pain, all in all.. hey, who cares? ;-) ).

Absolute positioning the footer won't solve the problem, 'cause the two blocks' positions would still be independent

Answer 3

Wohoo! I figured it out!

Thanks for all your help. Here's my CSS to fix it:

ncs {

float: none;
overflow: visible !important;
position: absolute;
height: auto;
width: 99%;
font-size: 12px;
padding: 20px 0px;
margin: 10px 0px;
clear: both;

}

.ncs_content { background: none; border: none; float: none; }

.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }

.ncs_footer { display: none; }

.ncs_footer_printed_date { margin: 0px; padding: 0px; width: 750px; font-size: 12px; display: block; }

So I basically had to encapsulate everything in #ncs (like what Lucius said) then play with it from there. I'll probably post this on my syntax notes site as well just in case if this thread gets removed... hopefully it'll help someone else struggling with the FF print bug.

Thanks to all! HURRAY! Now I will tell my boss... not that he cares how long it took or how many brain cells I killed by hitting my head against my desk...