SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to sitepoint

    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.

    Code:
     <div class"block">
    The equal sign is missing and it should be :
    Code:
     <div class="block">
    If that's only a local error here then we'd need to see the rest of the real code

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    revert == reply, for those curious

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rahul22984 View Post
    .block
    {
    page-break-inside:avoid;
    }
    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...

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The IE8 bugs will not affect the OP's code. To see for yourself, try this:

    Code HTML4Strict:
    <!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%" 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:

    Code HTML4Strict:
    <!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>

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Firefox will bump anything floated and tall, or any fieldset, to the next page : )

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Firefox will bump anything floated and tall
    Interesting. Yet another addition to my ever-expanding collection of techniques for simulating "page-break-inside: avoid" in Firefox.

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code css:
    @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
    Code html4strict:
    <!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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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".

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks Paul and Poes

    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

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.
    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.

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    IA, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
    <!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):

    Code HTML4Strict:
    <!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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •