IE7 and page-break-before

Question

I have some code that uses page-break-before: always that works fine in IE6, but in IE7, the page-break-before is ignored. Was there a change in this behavior that I have not seen documented?

Answer 1

The same problem here!

Is there a solution? 

Answer 2

ditto on page-break-after too! nice forwarning from Microsoft before they had Yahoo! offfering the download

Answer 3

Thanks again Microsoft!  As a web developer, I love to hate your browser.  I code everything in Firefox and test it all in Internet Explorer before publishing it of course.  This is when I find out how much Internet Exploder messes up.  Please.  Invest some time into Internet Exploder.  BTW, Firefox has an automatic spell checker built into the textareas on web pages.

Answer 4

 

Ok, ok. A user has emailed me with this "featurette" today.

I was using the following in a web based print rendering run.

 

snip...

<style type="text/css">

p.breakhere { page-break-after: always }

</style>

</head>

 

output = output & Render_Customer_Billing_Timesheets(oledb_connection2, oledb_Reader("tid"))

output = output & "<p class=""breakhere""></p>"

 

That is now broken. But here is my solution / fix to "IE7 page-break" problem.

 

output = output & "<div style=""page-break-after: always"">"

output = output & Render_Customer_Billing_Timesheets(oledb_connection2, oledb_Reader("tid"))

output = output & "</div>"

 

The above works nicely in IE7. I can sort of understand why MS have broken the facility in IE7 given that <p> seems to be discouraged now days in CSS and XHTML 1.x.

Well I am not going to lose sleep over that changette. It took less than an hour from my first user support request to deploying the solution to the live server, so no shame there.

I hope it helps.

Answer 5

I also am having this issue and was unable to get the solution provided above to work.  I am using the page-break-before style within a table.

 

stOutput = "<table width = 100% style='page-break-before:always' border=0 cellpadding=4><font size = '1'>
<tr><td style='font-weight:700;font-size:20' align='center'colspan='12'>" & left(stclient,5)  & " &nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp " & stClientName & " &nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp Bill Routing Detail</td></tr>
<tr><td style='font-weight:700;font-size:20' align='center' colspan='12'>(" & stEngagement & ")</td></tr>
<tr><td colspan='12'><img src='img/black_spacer.gif' width=100% height=1></td></tr>
<tr style='font-weight:Bold;font-size:16'><td colspan='12' align='center' bgcolor='White'>BEING BILLED</td></tr>
<tr><td colspan='12'><img src='img/black_spacer.gif' width=100% height=1></td></tr>
<tr valign = 'bottom' align='right' style='font-weight:700'><td width = '5%' ><font size='2'><u>Code</u></td>" & _
                "<td align ='left' width = '20%'><font size='2'><u>Service Description</u></td><td width = '5%'><font size='2'><u>Employee</u></td>" & _
                "<td width = '5%'><font size='2'><u>No Work Since</u></td><td width = '5%'><font size='2'><u>Hours</u></td>" & _
                "<td width = '5%'><font size='2'><u>Total Wip</u></td><td width = '5%'><font size='2'><u>Fav (Unfav) Adjust</u></td><td width = '5%'>

.....

Doug

Answer 6

 uwdoug79,

Pardon me for stating the obvious, but have you tried wrapping around your <table></table> inside the <div> sample I showed above.

I think the magic is in using the <div>'s for formatting layout since <div style="..."> complies with MS's new found CSS compliant standards.

Also, I see you appear to be using single quotes as opposed to double quotes.

May I suggest you run your code through http://validator.w3.org/ as it has excellent advice on what you are actually sending, and why browsers may misinterpret code?

 

 

 

 

Answer 7

Here is my workaround for this:

<p style="page-break-after:always"><br style="height:0; line-height:0"></p>

Answer 8

I have a workaround I found on another forum.

This works with breaks before and after.

<div style="page-break-before:always;font-size:1;margin:0;border:0;"><span style="visibility: hidden;">-</span></div>

 

Answer 9

The solution I have used with IE6, Firefox and Opera still works in IE7.

I have separate CSS for print friendly pages and the display pages. In the CSS for the print friendly pages, I have
p.pagebreak { page-break-after: always; }
and in the content, I have
<p class="pagebreak">&nbsp;</p>

In the CSS for the display pages, I have the following.
p.pagebreak { display: none; }
This prevents the <p> tag from creating an extra blank line on the display page.

I have never tried to break a table across pages, so I don't know if this solution would work within a table.

p.s. my document type is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 10

--SOLUTION--

 

 

Page break before and after ect no longer work on elements with no contents. Either put a &nbsp; inside the element (must be block level) you're doing it on, or put it on a table.

 

<table style="page-break-after:always">
<tr><td>raa</td></tr>
</table>
that works

<div style="page-break-after:always"></div> does not work

<div style="page-break-after:always">&nbsp;</div> does work

Answer 11

you might have already figured this out, but the problem is IE7 won't do a page-break after or before a tall element (defintion of tall unknown), so you have to use one of several various methods to create a 1px element before your page-break. Like:

 

<div style="height:1px">&nbsp;</div>

<div style="page-break-after: always; height:1px;">&nbsp;</div>

It sucks, I know, but that's the way it is...

Answer 12

Fantastic, used this code to correct my asp pages and it works great. Try it also if you have a database that is displaying multiple tables but you need each table in its own page. In my case I need to display from a db a huge table with a lot of information per customer. Each table needs to print in its own page. I used the code in the loop and it worked great. Hope it works for you.

<html>
<head>
<title>Whatever</title>
<style type="text/css">
div.break {page-break-before: always}
</style>
</head>
<body>

<%
sql="select stuff from table here"
set rs = Server.CreateObject("ADODB.Recordset")
rs.open sql, con
do while not rsnew.eof
%>

<div style="page-break-after: always">
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
.........ton of other tables plus data from db
</table>
</div>

<%
rs.movenext
loop
rs.close()
set rs = nothing
%>

</body>
</html>

Answer 13

Curiosity question.  I noticed that you defined a CSS class called break in the <head> tag but you don’t refer to it in the code.  Instead, you code a style on the <div> tag.  Was the class not working in the code?

Answer 14

" ---IE7 won't do a page-break after or before a tall element (defintion of tall unknown), so you have to use one of several various methods to create a 1px element before your page-break.---"

Does that mean that the following is impossible:

I have a html page with elements in div-boxes. One div-box for each day in the week.

Now I've managed to have a page-break before every new week, but if the seven elements do not fit on one page I'd like to avoid dividing the day elements (text + image). As it is now I get page-breaks in such a way that some text-lines become unreadable - the upper part of the letters on one page and the lower part of the letters on next page. I've tried page-break-before:auto on the div-box that covers the day, but it doesn't work.

If I should introduce a page-break-before or after on a small element (1px &nbsp;) it will make no sence because it is not that element I would like to test if it fits into this page or not - it's the entire day-element. Is this impossible with IE7 since it is might be a socalled "tall element"?

Or my actual question is: is "auto" with page-break-before/after wasted with IE7? Because the auto part only pagebreaks if the 1 px doesn't fit on the page.

Answer 15

My experience is having content within the html element &nbsp; was sufficient.  I will likely hide the div so it doesn't waste space and use the 1px method as a last resort.

 

--Annoyed

Answer 16

Came across with the same issue, page-break-before doesn't work in IE7.

I have done the following to make it work again:

1) packed all expected pages into corresponding DIV elements so that no visible content preceeded the first DIV;
2) used page-break-after for the first DIV instead of using page-break-before for the second one.

Also noticed that placing page-break-before for the first DIV makes all other page-break-before work correctly, even if the second DIV cannot be fittet to a single page in IE7 but cause a first blank page to show in IE6. The solution listed above works in IE7 and IE6 equaly.

Answer 17

I'm having this problem too, and now tried with this <div style="page-break-after: always; height: 1px;">&nbsp;</div> but it didn't work

My layout is made of many tables and I tried to put that both inside a cell and between tables.. neighter worked. Then I tried this thing with just one html file, where I made few tables .. and everything worked. So the problem is somewhere in my about 60 html- and php-files. Any idea what could be wrong?

And then another question: Can I use the style="page-break-inside: avoid;" in <tr> -tags?

Answer 18

I'm having this problem too, and now tried with this <div style="page-break-after: always; height: 1px;">&nbsp;</div> but it didn't work

My layout is made of many tables and I tried to put that both inside a cell and between tables.. neighter worked. Then I tried this thing with just one html file, where I made few tables .. and everything worked. So the problem is somewhere in my about 60 html- and php-files. Any idea what could be wrong?

And then another question: Can I use the style="page-break-inside: avoid;" in <tr> -tags?

Figured it out myself.
The main table of the layout (the table that includes everything on the sites) was having this style="position: absolute; ..." thing so it couldn't do it.
I made different stylesheets and linked them with media="screen" and media="print" and put this position: absolute just in screen :)


Thanks for the tips

Answer 19

I had the same problem.

Here is a solution that works fine for me:

<style>
DIV.breakPage { PAGE-BREAK-BEFORE: always }
</style>
</head>

<body>
...
<div class='breakPage'><b style='display: none'>&nbsp;</b></div>
...

As IE7 doesn't accept an empty html tag when there a break page, I have added a hidden content.

---

Gérard

Answer 20

Seems like the <tr style="page-break-inside: avoid;"> doesn't work
Usually the print preview doesn't break rows but for example when I have images in last few cells, it does break the page before them.. Any ideas how to avoid this?

Answer 21

I had same problem for IE and I fixed it as following

 

I replaced <div style="page-break-after: always; height: 1px;">&nbsp;</div> with

 

<div style="page-break-after: always;float:left;height:15px;width:990px;">&nbsp;</div> where width is the maximum width of you HTML page.

Thanks