The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Print - Content and Footer overlap
CharlesEF
post Mar 21 2018, 04:05 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi All,

I have made a sample page for another post I made on MSDN. Seems IE and Edge will only print 1 page when they should print 2 pages.

The sample page has the footer hidden. What I have tried to do is move the bottom of the content up the page so I can show the footer. The header section is red, the menu section is yellow, the content section has no background color (white) and the footer section is blue. When you print preview you might not see the colors, unless you have background colors enabled. The best solution would be to make the footer print at the very end (in other words print footer on page 2) but my research suggests that can't be done. Even the CSS @page footer will not work in my case. The sample page is here.

If anyone has an idea of the IE and Edge printing problem please post here also.

Also, if anyone with different browsers can test the page to make sure they see 2 pages that would be great. Please report any browsers that don't show 2 pages.



Thanks for any and all help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 21 2018, 05:14 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You want the footer to print? But it's set to display: none in the print CSS... unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 21 2018, 05:19 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sorry! Me stoopid. I get it now.

I'm not good at print. But I'll ponder.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2018, 08:39 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



The problem is trying to figure out the bottom margin of the content section. I tried using CSS 'bottom' and 'height' but no value I tried in 'bottom' made a difference. The only value that made a difference (but causes a side effect) for 'height' was 100% but that only affected IE and Edge, they both now print 2 pages. The side effect is that all single page forms now print with a blank 2nd page. So, I may be stuck leaving the footer hidden.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2018, 02:16 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Make #content position: static in the print style sheet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 22 2018, 09:58 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I tried that, it made no difference. Well, it did make a difference but not in a good way. With position: static; the first couple of fields on each page was missing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2018, 03:07 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, you must also give #content enough top margin to go free from the header and menu since they are positioned. I should have said.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 22 2018, 05:08 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



What I did was change the position of the #header, #menu and #content to static. By doing it that way I did not need to set the top margin in the #content at all. This fixed the multiple page printing problem in IE and Edge. But, now all my single page forms print with a blank 2nd page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 23 2018, 04:01 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't understand. Then how did it fix the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 23 2018, 11:32 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



IE and Edge now print multiple pages but I found that my single page forms now print with a blank 2nd page. I thought it fixed my IE and Edge multiple page printing problem not the problem I posted about here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 23 2018, 03:47 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do it only on the concerned page then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:58 PM