navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

Page breaks

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Page breaks
Page: [1]
 
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
Page breaks - 12/6/2006 17:14:43   
I'm trying to create a printing style sheet for a HTML page. I want it to keep certain lines together. I'm using tables to structure blocks of content. The first row uses THEAD so that it repeats at the top of the page if there's a page break within the table. This does work. The second row uses TBODY and is divided into two columns, with a list of links in the left and a paragraph of text in the right. I want to ensure that I don't wind up with only one line of the TBODY content before a page break. At the moment, that's happening on one of the pages.

Here's a sample of the printing CSS I'm using, but most of it doesn't seem to be working:

@media print {
	thead td { font-size: 12pt; }
	tfoot td { text-align: center; font-size: 9pt; }
	thead { display: table-header-group; }
	table.indextbl { orphans: 1; }
	tfoot { display: table-footer-group;	}
	thead td, thead td { position: static; }
	table.chapter thead { page-break-before: always; }

	td.padded p { color: red; orphans: 3; widows: 3; }
}

td.padded is the right-hand column (padding on the left side), where the paragraph of text is. Even with widows/orphans set to 3, it still insists on breaking after one line of text. I finally put the color-change in the last line just to see if ANYTHING was getting through. It does indeed change the paragraph text color, but it still leaves the one line on the previous page.

I don't think any of the other instructions are working either, which I put in there a while back. (For instance, the footer is not centering.) I thought I needed the other instructions to get the THEAD sections to repeat, but they seem to be doing it anyway by virtue of using THEAD and TBODY.

I've tried page-break-before and page-break-after at various places in the table, at various element levels (table, td, p, etc.). I've tried putting the print CSS in a separate file (with media="print" in the style link), as well as putting it in the same CSS that it uses for the screen. Nothing changes where the page breaks. The colour of the text will change, but nothing else seems to have any effect. It's thumbing its nose at me, I swear!

I'm testing it on IE7 using the print preview feature. The client's computers use IE6.

Has anyone EVER got this to work?? What am I doing wrong?

Starhugger
...who's getting a headache
:)
jaybee

 

Posts: 14157
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: Page breaks - 12/6/2006 20:33:00   
Basically my dear you are up a creek without a paddle.

Fact is you can't tell which printer it's printing on, how they have their margins set, what size paper they're using, what the available font sizes are and so on and so forth.

You will never get a page to break at the end of a page as a "page" is not definable.

Have a read of this.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Starhugger)
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
RE: Page breaks - 12/6/2006 22:01:54   
quote:

ORIGINAL: jaybee

Basically my dear you are up a creek without a paddle.

Fact is you can't tell which printer it's printing on, how they have their margins set, what size paper they're using, what the available font sizes are and so on and so forth.

You will never get a page to break at the end of a page as a "page" is not definable.

Have a read of this.

Thanks for replying, jaybee. I had skimmed that site before but didn't find it helpful. Guess I should have done more than skim. :) But the more I read, the more confoozled I get.

So let me get this straight. There IS CSS code that lets you control page breaks, except that most browsers don't support it so they don't work? Yet I find dozens of websites that talk about this code that doesn't work in almost all browsers? I must be missing something. :)

It shouldn't matter what printer it's on, what size page, etc. All I really want to do is the same kind of thing in a word processor where you say "keep these lines together" or "keep with next." There's no way to do that with CSS?

SH

(in reply to jaybee)
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
RE: Page breaks - 12/6/2006 22:14:35   
Also: when I use "page-break-after/before: always" it works! It does weird things with the chunk of text left on the page, but it does break where I put that code. So why can't I get "page-break-after/before: auto" to work? It's supposed to work the same way, if a page break happens within the element, right?

SH

(in reply to Starhugger)
rubyaim

 

Posts: 757
Joined: 6/22/2005
Status: offline

 
RE: Page breaks - 12/7/2006 0:19:44   
You can get print styles 'good enough' for tableless pages but as Jaybee said you can't control printers, margins, paper or printer settings.

Print styles for data tables can be quite difficult but I've found if I keep tweaking they get to 'good enough' eventually.

Other times I've just gone 'never mind' :)

Would you be able to post more code? A dummy page with your table and sample content and your styles? There may be a few things left to do.




_____________________________

Sally

(in reply to Starhugger)
jaybee

 

Posts: 14157
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: Page breaks - 12/7/2006 8:27:41   

quote:

ORIGINAL: Starhugger

Also: when I use "page-break-after/before: always" it works! It does weird things with the chunk of text left on the page, but it does break where I put that code. So why can't I get "page-break-after/before: auto" to work? It's supposed to work the same way, if a page break happens within the element, right?

SH

Because page-break is poorly supported in all browsers and it's unlikely to change due to the impossibility of defining a page.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Starhugger)
Starhugger

 

Posts: 512
Joined: 4/12/2005
Status: offline

 
RE: Page breaks - 12/7/2006 15:01:40   
Not to ignore jaybee's sage (if depressing) advice :) but I'm going to follow Sally's suggestion and post a dummy file. I've uploaded it to a test directory on my site:

http://www.evolvingdoor.ca/testonly/testpage.htm

Here's the print CSS for it. The sections that cross pages are the only ones where the paragraph is in a <p> code, so they show up as red (due to the test code below). Again: I'm testing it on IE7 (the client uses IE6) and testing the printed page using IE7's print preview.

/* ----- PRINT STYLES ----- */

@media print {
	thead td { font-size: 12pt; }
	tfoot td { text-align: center; font-size: 9pt; }
	thead { display: table-header-group; }
	table.indextbl { orphans: 1; }
	tfoot { display: table-footer-group;	}
	thead td, thead td { position: static; }
	table.chapter { page-break-before: auto; page-break-inside: avoid }
	td.padded p { color: red; orphans: 3; widows: 3; page-break-inside: avoid; }
}


Thanks!

SH

(in reply to rubyaim)
jaybee

 

Posts: 14157
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: Page breaks - 12/7/2006 15:49:06   
You need to test in both. IE7 is not IE6. Things that work in one don't work in the other.

You're using an external stylesheet. You shouldn't have the rules inside an @media

thead td { font-size: 12pt; }
tfoot td { text-align: center; font-size: 9pt; }
thead { display: table-header-group; }
table.indextbl { orphans: 1; }
tfoot { display: table-footer-group;	}
thead td, thead td { position: static; }
table.chapter { page-break-before: auto; page-break-inside: avoid }
td.padded p { color: red; orphans: 3; widows: 3; page-break-inside: avoid; }


goes in your stylesheet. You only use @media in inline styles.
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html

< Message edited by jaybee -- 12/7/2006 15:58:26 >


_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Starhugger)
rubyaim

 

Posts: 757
Joined: 6/22/2005
Status: offline

 
RE: Page breaks - 12/7/2006 17:50:04   
It's not so bad in IE6 really except the right table cells are cutting off (based on my settings and printer and using A4 size paper) - you can try this in your print style to work around that:

table#container {
table-layout:fixed;
width: 99%;
}

There is a fair bit of white space on print so this could be tweaked a bit. It may be an idea not to print the images - will not help the problem but will save on ink and they are probably not required for a printed document.

img {display:none;}

You could play around with your td widths for print if the topics are not overly long (eg, make the cell that holds the topics 30%).

If it is important that the cells do not break you could perhaps have a PDF alternative (though I'm guessing that defeats the entire purpose?).

Edit: AFAIK Opera is the only Browser that supports orphans, widows, page-break-inside and page-break-avoid.


< Message edited by rubyaim -- 12/7/2006 17:59:32 >


_____________________________

Sally

(in reply to Starhugger)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Page breaks
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts