I need a header and footer when printed... I'm very close but I get overlap... HELP

[ZHPOWER]

Hi,

I'm a newbie so please be nice.. :-)

I have some experience with CSS and what I am tring to accomplish is to add a header and footer (UNCLASSIFIED) to all pages when printed. The browser we use is IE 6 and 8.

Seems to work except that it overlaps my text at the top and bottom of each page. I read about using tables but I'd like to avoid that for a number of reasons.

Can someone help?


This is what i have in my html files

<div class="divHeader">UNCLASSIFIED</div>
<div class="divFooter">UNCLASSIFIED</div>

In this CSS:

.divHeader

{ margin-left:0;
position: fixed;
top: 0;
display: inline;
color: red;
}


.divFooter

{ margin-left:0;
position: fixed;
bottom: 0;
display: inline;
color: red;
}

[RyanReese]

Well in the HTML files you have divFooter as the class both times, and the CSS you posted there is a separate divHeader and divFooter. Could it be something as easy as that?

Could be a careless mistake, but this might be the issue .

[ZHPOWER]

Well in the HTML files you have divFooter as the class both times, and the CSS you posted there is a separate divHeader and divFooter. Could it be something as easy as that?

Could be a careless mistake, but this might be the issue .

Good catch. I just typed it wrong. It's correct in my files.

Any other suggestions?

[RyanReese]

Is there enough information in each div that it would overlap on a smaller screen?

If this is an intranet site and you ahve control if people have JS on, you could set it so that the header div is top:0 and the height stops at 50%, and the footer starts 50% down and goes to the end of hte page.
Since the divs start at the top and bottom, if there is enough content, it will overlap. Your best bet would just be to eliminate the position:fixed and just let the document flow normally .

[TechnoBear]

Good catch. I just typed it wrong. It's correct in my files.

I've amended it in your post so it doesn't cause confusion.