Need Help Troubleshooting CSS for Printing

CSS for Printing Issue

[ccook13]

I have decided to develop CSS to style my web pages for printing. So far I am getting the results I desire from Firefox 2.0. However I am having an issue with IE 6. If your open the following page in IE:

<removed>

Go to print preview, move to the second print page and scroll to the bottom you will see that the page break splits a single line of text between two printed pages.

Any suggestions about how to stop this?

Thanks

Cliff

[edited by: encyclo at 2:12 am (utc) on Dec. 12, 2006]
[edit reason] no personal URLs please, see forum charter [/edit]

[piskie]

Welcome to WebmasterWorld.

You could try (I usualy do) inserting style="page-break-after: always" into a tag that contains the text that you want to end the page with.
Or conversely style="page-break-before: always" in the tag that you want to start the page.

These only force page breaks in print formatting and don't change the screen layout in any way.

[ccook13]

Thanks for the suggestion. I tried this approach but it is not sufficient to solve my problem. I do not want to apply "page-break-after: always" to all p or h2 tags, not do I want to have to individually edit my web pages to specify page breaks. I was hoping the widows or orphans would work but they are not supported by IE 6. I'm surprised that IE would break a page in the middle of a single line of text, such that part of the letters are on one page and part on the next. You can see an example of what I mean here:

Anyone have any ideas?

Thanks

Cliff

[edited by: SuzyUK at 4:11 pm (utc) on Dec. 12, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

Welcome to WebmasterWorld ccook13!

in the print.css try adding or increasing top/bottom padding and/or margin on the body element, it is strange that it cuts a text line in half horizontally!

However Print margins are outwith the full control of CSS as the user will have their preferences set in their browser. You could also try slightly adjusting line height and font-size (which should be pt for print) which might help stop it happening if you can hit an optimum value inside the printer margins. However again it's likely that not everyone will see the problem depending on their default settings.

Oh and try tried looking at it on different IE machines to test the theory, also lastly IE did have problems if the content to be printed is in a floated div, it's usually possible to remove floats in a printed version if that's the case

sorry can't be more help, but when using any CSS you can only really make suggestions to the browser/printer and unfortunately printer settings can vary a lot

Suzy

[ccook13]

Thanks Suzy.

While your answer didn't give me the solution it lead me to one. The main body DIV was set to position: relative (not float). Changing relative to static stopped the single line of text from splitting across two pages!

Cliff