|
CSS - Page Break Issue
I am trying to create a printable address book. The output is in the following format, with more tables for each entry:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Header Test</title> <link rel="stylesheet" type="text/css" href="documents/directory/style.css" /> </head> <body> <h1>Stanley Road Baptist Church</h1> <h2>Address Book 2005</h2> <div class="pagebreak"></div> <table> <tr> <th colspan="2"> Joan Facer </th> </tr> <tr> <td> Abbeystead<br />New Road<br />Lancaster<br />Lancashire </td> <td> </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> </table> <table> <tr> <th colspan="2"> Matt Fletcher </th> </tr> <tr> <td> 6 Baycliffe Crescent<br />Morecambe<br />Lancashire<br />LA4 4EQ </td> <td> 01524 426559<br /> matt@1stmorecambe.net<br /> 07792 148897 </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> </table> </body> </html> I am trying to make it so that it never breaks the page in the middle of an entry, but it will not play ball. I am using the following CSS declaration to get the effect: Code:
table {
page-break-inside:avoid;
}
But it isn't working at all. Any suggestions? Similar TutorialsHi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery Question for the CSS gurus: I have a site that is listing several steps to complete a process, and each step is displayed in a table. The problem is that IE6 (I believe my workplace uses 6, anyway) doesn't want to break it properly - at times it breaks it in the middle of the tables. I don't want to manually enter the page breaks each time (as I know I can do with page-break-xxx: always), because future updates may be done by someone who has absolutely no coding experience. Any thoughts on how to achieve what I'm looking for in IE6? Thanks! Anyone know a way to put a page break in a standard html/php webpage? I am printing invoices and need to break to another page after a certain amount of line items are listed. The question is "what effect will page-break-after have on screen media"? Am I correct when I say that it will have no effect? I believe that page-break-after only affects print media, but I have poor reading comprehension and would just like to double check. Can anyone confirm this? It seems to me that page-break-before doesn't work when printing in Landscape in IE7 (you can just look at the page preview, it does seem to work in portrait). Any thoughts for a workaround? Hi, I'm having a problem with Firefox and a print-friendly stylesheet. Basically, I'm printing out a load of images - 9 per page, in 3 rows of 3. After 9 images, I'm printing a <div style="page-break-after:always;"></div> However, the problem I'm getting is that the 10th image, which appears at the top left of the next page, is missing. All of the other images on the page print, apart from that one. Has anyone else had the same problem, and is there a way around it. Other threads I've Googled suggest it's a bug in CSS2, but my boss/client won't accept that as an answer! Thanks in advance, Psycle is there a way to check if a page-break is going to happen? ex: if i print a long document that takes up 2 pages... i want to knwo where a page break will occur... I am trying to print a table withing a loop. Whenever the loop reaches class = "end" I want the printer to start a new page. Code: <div id = "texter"> <table><td></td> . . . <td class="end">sdfs</td> <td>hh</td> . . . <td class="end">kkk</td> <form> <input type="button" value="Print this page" onClick="window.print()"> </form> </table> </div> Code: @charset "utf-8";
/* CSS Document */
body {
font-size: 10pt;
font:Arial, Helvetica, sans-serif
background-color: #FFFFFF;
margin: 0;
color:#000000;
background-color: #FFFFFF;
}
#texter {
width:auto;
height:auto;
position:absolute;
top:2.6mm;
left:3.9mm;
background-color:#333333;
}
input, button {
display:none;}
#texter.end {
page-break-after:always}
THANKS Hi all.. I been tried to put page break function inside <div> tag but it still can't take any effect. Am i correct or any others idea? And when i put in page break function and want to print page 2, but it'll also print out some page 1 table field. I have an internal document that depends on page-break-after to separate the pages when it is printed. The attribute page-break-after:always had been working just fine. Now, I've noticed it is getting ignored on some users machines that have updated to IE8. I've never seen this problem in IE7 or Firefox, and I've also seen it work at times on IE8, though rarely. For the most part, users on IE8 are getting a document that treats it as only one page and will only print that first of 14 pages. Does anyone know about problems with this attribute in IE8 and what might need to be done to fix it. I have a report that prints a list o people and a select box that will run the same list in a form format (all on one page) so that the user can print this off and get one form per page. I am using page-break after always as part of a div that contains the info to be printed (this is a loop from a db query). On my printer and a few others it works like a charm, but I have a user that gets the first page (first loop) no problem, but after that he gets parts of the pages when he prints (they display fine on the screen in the browser - IE6). Some pages come out with half the info (the bottom half is missing. Anyone ever hear of this issue? He is using WinXP IE 6 Printer is HP 855 (or something like that) I have a long list of paragraphs (no more than 10 lines each), dynamically placed on a page. I am trying to avoid breaking paragraphs when the user prints the page. <p style="page-break-inside: avoid;"> <?php do { Paragraphs from Mysql } while ($row_data=mysql_fetch_assoc($data); </p> This is not working. Paragraphs are splited in two pages. Thanks in advance for any help w3 css-validation tool Quote: context:html body Property word-break doesn't exist : break-all it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation Hi there, I have xsl: Code: <div class="block">
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr></tr>
</table>
</div>
and css: Code: .block{
page-break-inside: avoid;
}
but it's not working, this should prevent page break in the middle of that table, but it does not. If the table happens to be in middle of page break the end of the table is printed to the beginning of next page. If I replace page-break-inside: avoid; with page-break-befo always; it does break before the table. So what wrong with page-break-inside, it should work, right? What am I missing..? I guess it's something stuped.. please, help me out, thanks! If I use word-break:break-all solves the problem when I enter a word without spaces (for e.g pppppppppppppppppppppppppppppppppppppppppppp), it breaks and coming in line by line like (ppppppp ppppppp ppppp) as I required. If I use word-break-cjk solves the problem when I enter a word without spaces (for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La), it breaks the word as I required. But I need both scenarios should work. Which style I need to use...? Hi, I'm working on my homepage at www.wecook.co.uk and want the grey background to at least be big enough to fill the whole page on most resoultions - currently on my monitor (1280 x 1024) it ends and i get a white at the bottom of the page - could someone suggest how i can adjust my css to fix this? any help is appreciated. thanks Hi there, I have two problems with the display of my website in different browsers. The first is when you view my site, http://www.tophatweddings.co.uk in FireFox. In IE 6 the white background extends to the foot of the content. However in Firefox you'll notice it doesn't and the left, central and right columns all finish at different levels. How can I get the white background to behave in the same way as IE? My second issue is with IE7. Now, some people might actually download and install this "browser" - those poor people. Anyway in IE 7 you'll notice the footer just decides to display halfway through the page because I guess some CSS has changed in this version of IE. Does anyone know what this could be? Help with either of these issues would be greatly appreciated and reputation points award to those who post helpful answers. Thanks - Here is the url: http://bradleyrose.net/WaterStreetRestaurant/pages/about_us.html The guy I'm building the site for says when he views the site, the pictures and copy in the 2 columns to the right of the navigation menu get pushed down to where the level of where the contact us button is. He is viewing the site on either IE6 or IE7 Any insight would be greatly appreciated. |
|||||||