Page-break css not working in div using IE8

Hi guys,
my problem related with CSS and xhtml i want to use css class in <div> and that css class have page-break-inside property which will use for <div> but when used it like that <div class"block"> it does not reflect on page , on the other hand if i use like that <div style=“page-break-inside:avoid”> its working well on page.

so, how can we use this css by making class , please suggest us if anyone have an idea about.

bye

Hi, Welcome to sitepoint :slight_smile:

We’d really need to see your actual code to debug further but you have a typo here which I am thinking is just a copy error and not in your actual code.


 <div class"block">

The equal sign is missing and it should be :


 <div class[B]=[/B]"block">

If that’s only a local error here then we’d need to see the rest of the real code :slight_smile:

hi paul,
Real code are below css not effecting div in IE8 :

<div class=“block”>
<table width=“98%” cellpadding=“0” cellspacing=“0” >
<tr>
<td align=“left” style=“width:60%; border: solid 1px black; border-right: 0px;”>
<span><b>Terminate Reason</b></span>
</td>
<td align=“left” style=“width:40%; border: solid 1px black;”>
<span><b>ResponseTitle</b></span>
</td>
</tr>
</table>
</div>

css code:

.block
{
page-break-inside:avoid;
}

please revert your suggestions soon.

Thanks for your reply.

Off Topic:

revert == reply, for those curious

This property apparently requires a doctype declaration. Try putting this at the very top of your html page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

There are also other ways to create “unbreakable blocks”, some of which may work in more browsers than “page-break-inside:avoid” does. For example, setting the display property to inline-block works in current versions of IE and Firefox, and probably others, too. In older versions, you can use a table with a <thead> section and no <tbody>. “Overflow: hidden” works in recent versions of Firefox, though I’d be surprised if it worked anywhere else.

The problem is that page-break-avoid:inside, despite being a really really useful property and having been around for absolutely ages, is only properly supported by Opera. Firefox, Chrome and Safari do not support it at all. IE7 and below don’t support it at all. IE8 only has “buggy” support for it - see http://reference.sitepoint.com/css/page-break-inside. This looks like it could be one of those bugs…

The IE8 bugs will not affect the OP’s code. To see for yourself, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.block
{
page-break-inside: avoid;
}
</style>
</head>
<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 

/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="block">
<table width="98&#37;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
</table>
</div>
</body>
</html>

If you test that code in IE8 or Opera, you will see that the table does not get split by the page break, but instead gets bumped to the next page. Obviously, this can only work if the table is small enough to fit on a single page (and don’t forget that its margins are included in its size!).

If you want to prevent page breaks in other/older browsers, the following may do the trick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
</style>
</head>
<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 

/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style="display: inline-block; width: 500px; page-break-inside: avoid;">
<table style="width: 100%; overflow: hidden;">
<thead style="display: table-header-group; overflow: hidden;">
<tr>
<td style="padding: 0;">


<table width="98%" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
<tr>
<td align="left" style="width:60%; border: solid 1px black; border-right: 0px;">
<span><b>Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason<br />Terminate Reason</b></span>
</td>
<td align="left" style="width:40%; border: solid 1px black;">
<span><b>ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle<br />ResponseTitle</b></span>
</td>
</tr>
</table>

</td>
</tr>
</thead>
</table>
</div>

</body>
</html>

Firefox will bump anything floated and tall, or any fieldset, to the next page : )

Interesting. Yet another addition to my ever-expanding collection of techniques for simulating “page-break-inside: avoid” in Firefox.

Hi,

I’m trying to achieve the same thing.
Specifically, I want to prevent code sections in <pre> elements from going over the page breaks when printed.


@media print {
	pre { page-break-before: auto }
	pre { page-break-inside: avoid  }
	pre { page-break-inside: avoid; float: left; width: 100% }
}

A test case for Firefox 4


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>untitled</title>
	<style>
		pre {
			padding: 7px;
			border: 1px solid #ccc;
			display: block;
			-moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
			box-shadow: 0 3px 5px rgba(0,0,0,.3);
		}
		@media print {
			pre { page-break-inside: avoid }
		}
	</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<pre>
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
	asdf
</pre>
</body>
</html>

Any clues?

Tanks.

Hi Mark,

I don’t think that Firefox supports it all. The only thing that seems to work is to use page-break-before:always but of course that makes all pre elements start on a new page.

I couldn’t see any other fixes for it I’m afraid.

Also, I checked because I wondered:
FF4 doesn’t fix the old FF3 bug I mentioned above, where long fieldsets are bumped to the next page… which isn’t so bad, just a waste of the user’s paper…
but it will also cut off any fieldsets who are longer than a piece of paper, instead of continuing on to another page. This is pretty bad. I make HTML forms that people can either print out and fill in (or they can use a PDF) OR if they want to fill it in on the computer, they can, then print (because typing is way faster than writing with a pen, plus you can be blind and fill it out and still send out in the mail : )
… but not in Firefox, not even 4. This was a bug introduced in the very first version 3 (so no present in FF2). But who knows: maybe 4.something will fix it?

I have to admit, I’m more than a little bummed that FF4 devs worked so hard to make FF4 work with WebGL (which can’t even run on my hardware), but not fixing an old print bug. Sure, these are probably totally different teams, but one feature is “cute” and “seXy” while the other is “basic functionality” and “definitely not seXy”.

I do wonder why all browsers makers have been very slow to make these print styles work. It’s the one area where there are no real fixes and no consistency.

They should make things work properly before going off and doing the new stuff.

Thanks Paul and Poes :wink:

I guess it’s about the amount of use of a specific feature that determines how much love it will get. I don’t often need to print from the web, I will however use the new features daily.

Maybe the browser vendors are working together to try to prevent those people that still print out their email :wink:

If you read the Mozilla forums, there are about 40 billion people requesting full compliance with the page-break specifications for print. OK, that might be a slight exaggeration, but it is one of the most common requests made.

Too bad I didn’t notice last month that this thread had been revived. Ah well, better late than never I guess.

Anyway, for those who are still interested in simulating the behavior of “page-break-inside: avoid;” in Firefox, there are actually several ways to do it:

The easiest method is to put the content inside a div or table with the display property set to “inline-block” or “inline-table”, respectively. Technically, this should work in any browser, but I’ve only verified it in recent versions of Firefox and Internet Explorer, and considering how little effort browser devs have traditionally put into supporting paged media, I wouldn’t be surprised if it didn’t work elsewhere (including in older versions of FF and IE). If anyone has time to test it in the other browsers, though, I’d be interested in knowing the results.

Just in case anyone’s too lazy to throw together a test page, here’s markbrown4’s code with the <pre> section placed inside an inline-block div to make it unbreakable:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
        pre {
            padding: 7px;
            border: 1px solid #ccc;
            display: block;
            -moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
            box-shadow: 0 3px 5px rgba(0,0,0,.3);
        }
        @media print {
            pre { page-break-inside: avoid }
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr>
<td>

<div style="display: inline-block;width: 100%;">

<pre>
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
</pre>

</div>

</body>
</html>

When you check the print preview, you’ll notice that the <pre> element gets bumped in its entirety to the second page rather than getting split across two pages. This is the same behavior you would get from “page-break-inside: avoid”, if it was supported.

Another way of avoiding page breaks that actually works in older versions of IE and FF (though how old I can’t say) is the method I already demonstrated two replies ago. Here it is again, but this time applied to markbrown4’s code (look for the html comment above the four elements that I added):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
        pre {
            padding: 7px;
            border: 1px solid #ccc;
            display: block;
            -moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
            box-shadow: 0 3px 5px rgba(0,0,0,.3);
        }
        @media print {
            pre { page-break-inside: avoid }
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<tr>
<td>



<!--THE NEXT FOUR TAGS ARE THE KEY TO AVOIDING PAGE BREAKS-->
<div style="display: inline-block; width: 100%; page-break-inside: avoid;overflow: hidden;">
<table style="width: 100%; overflow: hidden;">
<thead style="display: table-header-group; overflow: hidden;">
<tr>
<td style="padding: 0;">



<pre>
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
    asdf
</pre>


</td>
</tr>
</thead>
</table>
</div>


</body>
</html>

I stumbled upon this technique a long time ago through trial and error, and I can’t remember if all of those tags and css properties are necessary to make it work. The most important factor, iirc, was placing everything inside table header (that is, a <thead> element with the css property “display: table-header-group”). That seemed to be the only element that the browsers would not allow to be split by a page break.

There is one other way of avoiding page breaks in Firefox that I’ve come across: setting the overflow property to “hidden”. I’m not sure why this would make an element unbreakable, but it seems to work just as well as any other method I’ve discovered. I wouldn’t be surprised if it stopped working at some point, though, as it seems like a bug to me.

That’s all I have for now. Best of luck to anyone out there who hasn’t given up yet!