IE7 and page-break-before

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 this question

IE7 and page-break-before

Jassim Rahma
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
Microbert
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.
gofur
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>
GSReddy
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"> </div>

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

It sucks, I know, but that's the way it is...
KitGreen
ditto on page-break-after too! nice forwarning from Microsoft before they had Yahoo! offfering the download
Khenat.Ram
The same problem here!

Is there a solution
LumpHammer
--SOLUTION--

Page break before and after ect no longer work on elements with no contents. Either put a   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"> </div> does work
leo1
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
erfg1
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"> </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">
Sajtron

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.
dusda
" ---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  ) 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.
JoeBlow123

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 " & stClientName & "   &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
soconne
Here is my workaround for this:

<p style="page-break-after:always"><br style="height:0; line-height:0"></p>
Ben Santiago
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>
IE7 and page-break-before

Answer this question