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

[yanochka]

I am using the following <div style="page-break-after: always"> code to create line breaks when someone decides to print out our online documentation.

It works in IE but not in Firefox. Does anyone know of equivalent CSS code for Firefox????

[yanochka]

So I haven't received any answers. Does ANYONE know?! Please!

[Dan Schulz]

Give me a few and I'll take a look at it.

Bu in the meantime, why isn't this in an external print stylesheet?

Also, can you post a link to the page in question?

[yanochka]

So here is the page I am talking about: example

My problem occurs when you try to print this page. So go to File > Print Preview to see what I mean.

The "Creating New Draws" table should begin on a brand new page and in Internet Explorer it works perfectly however it doesn't work in Firefox.

So I am looking for equivalent code (IF such exists) that is supported by Firefox and IE simultaneously.

[AutisticCuckoo]

FYI, it works in Opera 9.01/Linux, too.

I've got it to work in Firefox (using page-break-before), but I had that in a separate print style sheet. Try moving it to a such and see if it helps.

[yanochka]

And if you don't move it to a separate style sheet, it doesn't work in Opera?

[AutisticCuckoo]

It works as-is in Opera. It looks as if Firefox may not be applying the inline style for media="print". That's why I suggested moving your CSS rule to an external style sheet or a STYLE element with an explicit media="print", to see if that solves the problem.

I remember having some problem with Firefox when I did this, but it was a while back and I've forgotten the details. It works now, at any rate, and I'm using an external style sheet with media="print".

[yanochka]

So I have the following external CSS set up and it still only works only in Internet Explorer. What am I doing wrong? I need this to work in FireFox and Netscape as well and it does not. HELP!

@media print {

div.page_break{
page-break-before: always;
}

}

@media screen {

div.page_break{
page-break-before: always;
}

}

[Dan Schulz]

I'm no expert on print stylesheets, but why do you have Microsoft's browser scrollbar styles (which only work in IE, Opera and Konqueror) in your printer stylesheet?

This is the results page I got from the W3C CSS validator (direct input check):

W3C Jigsaw Powered
W3C CSS Validator Results for file://localhost/TextArea

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Errors
URI : file://localhost/TextArea

* Line: 33 Context : body

Property scrollbar-3dlight-color doesn't exist : #ffffff
* Line: 35 Context : body

Property scrollbar-arrow-color doesn't exist : #006d50
* Line: 37 Context : body

Property scrollbar-base-color doesn't exist : #ffffff
* Line: 39 Context : body

Property scrollbar-darkshadow-color doesn't exist : #333333
* Line: 41 Context : body

Property scrollbar-face-color doesn't exist : #ebf2ec
* Line: 43 Context : body

Property scrollbar-highlight-color doesn't exist : #ffffff
* Line: 45 Context : body

Property scrollbar-shadow-color doesn't exist : #ffffff

Warnings
URI : file://localhost/TextArea

* Line : 1 Properties for other media might not work for usermedium
* Line : 47 (Level : 1) You have no background-color with your color : body
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .subHeader and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header2 and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header2 and a
* Line : 109 (Level : 1) You have no background-color with your color : a
* Line : 109 (Level : 1) You have no background-color with your color : a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .subHeader and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .subHeader and a
* Line : 109 (Level : 1) You have no background-color with your color : a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header and a
* Line : 109 (Level : 1) Same colors for color and background-color in two contexts .header2 and a
* Line : 121 (Level : 1) Same colors for color and background-color in two contexts .subHeader and a
* Line : 121 (Level : 1) Same colors for color and background-color in two contexts .header and a
* Line : 121 (Level : 1) You have no background-color with your color : a
* Line : 121 (Level : 1) Same colors for color and background-color in two contexts .header2 and a
* Line : 145 (Level : 1) You have no background-color with your color : a.content
* Line : 145 (Level : 1) You have no background-color with your color : a.content
* Line : 145 (Level : 1) You have no background-color with your color : a.content
* Line : 159 (Level : 1) Same colors for color and background-color in two contexts .subHeader2 and a.content
* Line : 159 (Level : 1) You have no background-color with your color : a.content
* Line : 179 (Level : 1) You have no background-color with your color : a.content2
* Line : 179 (Level : 1) You have no background-color with your color : a.content2
* Line : 179 (Level : 1) You have no background-color with your color : a.content2
* Line : 195 (Level : 1) Same colors for color and background-color in two contexts .subHeader2 and a.content2
* Line : 195 (Level : 1) You have no background-color with your color : a.content2
* Line : 233 (Level : 1) You have no background-color with your color : .text
* Line : 253 (Level : 1) You have no background-color with your color : .on_this_page
* Line : 253 (Level : 1) Same colors for color and background-color in two contexts .subHeader and .on_this_page
* Line : 253 (Level : 1) Same colors for color and background-color in two contexts .header and .on_this_page
* Line : 253 (Level : 1) Same colors for color and background-color in two contexts .header2 and .on_this_page
* Line : 291 (Level : 1) Same colors for color and background-color in two contexts .subHeader and .footer
* Line : 291 (Level : 1) Same colors for color and background-color in two contexts .header2 and .footer
* Line : 291 (Level : 1) You have no background-color with your color : .footer
* Line : 291 (Level : 1) Same colors for color and background-color in two contexts .header and .footer
* Line : 309 (Level : 1) Same colors for color and background-color in two contexts .subHeader and .sectionTitle
* Line : 309 (Level : 1) Same colors for color and background-color in two contexts .header and .sectionTitle
* Line : 309 (Level : 1) Same colors for color and background-color in two contexts .header2 and .sectionTitle
* Line : 309 (Level : 1) You have no background-color with your color : .sectionTitle
* Line : 331 (Level : 1) Same colors for color and background-color in two contexts .subHeader and .sectionTitle2
* Line : 331 (Level : 1) Same colors for color and background-color in two contexts .header and .sectionTitle2
* Line : 331 (Level : 1) Same colors for color and background-color in two contexts .header2 and .sectionTitle2
* Line : 331 (Level : 1) You have no background-color with your color : .sectionTitle2
* Line : 353 (Level : 1) You have no background-color with your color : .sectionSubtitle

Valid CSS information

* @media print {
o div.header_footer {
+ display : none;
}
o div.page_break {
+ page-break-before : always;
}
o .section_footer {
+ display : none;
}
o body {
+ margin : 0;
+ color : #000000;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ font-size : 10px;
}
o .button {
+ border : 1px solid #efa210;
}
o input.buttons {
+ border : 1px solid #c6c7c6;
+ background-color : #006952;
+ color : #f7f7f7;
+ font-size : 9px;
+ font-weight : bold;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ margin-top : 10px;
+ padding : 3px;
+ text-transform : uppercase;
}
o input.text {
+ border : 1px groove #ffffff;
+ background-color : #f7f7f7;
+ color : #000000;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ width : 200px;
}
o a, a, a {
+ color : #006d50;
+ font-size : 10px;
+ font-weight : normal;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
}
o a {
+ color : #006d50;
+ text-decoration : none;
+ font-size : 10px;
+ font-weight : normal;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
}
o a.content, a.content, a.content {
+ color : #ffffff;
+ text-decoration : none;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
}
o a.content {
+ color : #efa210;
+ text-decoration : none;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
}
o a.content2, a.content2, a.content2 {
+ color : #ffffff;
+ text-decoration : none;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ letter-spacing : normal;
}
o a.content2 {
+ color : #efa210;
+ text-decoration : none;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ letter-spacing : normal;
}
o .screenshot {
+ border : 1px solid #006d50;
+ margin-top : 10px;
+ margin-bottom : 10px;
+ margin-right : 10px;
}
o .text {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #000000;
+ line-height : 15px;
+ text-align : justify;
}
o .on_this_page {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #006d50;
+ font-weight : bold;
}
o table.content {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #000000;
+ line-height : 15px;
+ background-color : #ebf2ec;
}
o .footer {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #006d50;
+ text-align : justify;
}
o .sectionTitle {
+ font-size : 16px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #006d50;
+ font-weight : bold;
+ text-transform : capitalize;
+ border-bottom : 1px solid #006d50;
+ padding-top : 30px;
}
o .sectionTitle2 {
+ font-size : 12px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #006d50;
+ font-weight : bold;
+ text-transform : capitalize;
+ border-bottom : 1px solid #006d50;
+ padding-top : 30px;
}
o .sectionSubtitle {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #000000;
+ padding-top : 2px;
+ line-height : 15px;
+ text-align : justify;
}
o .header {
+ padding-left : 11px;
+ padding-right : 11px;
+ background-color : #006d50;
+ height : 20px;
+ color : #efa210;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ font-weight : bold;
}
o .header2 {
+ padding-left : 11px;
+ padding-right : 11px;
+ background-color : #006d50;
+ height : 20px;
+ color : #ffffff;
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
}
o .subHeader {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #ffffff;
+ font-weight : bold;
+ background-color : #006d50;
+ text-transform : capitalize;
}
o .subHeader2 {
+ font-size : 10px;
+ font-family : Verdana, Arial, Helvetica, sans-serif;
+ color : #ffffff;
+ font-weight : bold;
+ background-color : #efa210;
+ text-transform : capitalize;
}
}

[Tyssen]

So I have the following external CSS set up and it still only works only in Internet Explorer. What am I doing wrong? I need this to work in FireFox and Netscape as well and it does not. HELP!

@media print {

div.page_break{
page-break-before: always;
}

}

@media screen {

div.page_break{
page-break-before: always;
}

}

I think Tommy was talking about doing this:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

rather than using @media print.

[yanochka]

I know I might have other problems in my stylesheet, but I am not into the complete validation part yet and my question was specifically in regards to making page breaks work in Firefox and Netscape (it only works in Internet Explorer for me right now).

If I use this code

<link rel="stylesheet" type="text/css" href="print.css" media="print">

then I need to have 2 separate style sheets - one for print and one for the web.

And by using this code

@media print {

div.page_break{
page-break-before: always;
}

}

@media screen {

div.page_break{
page-break-before: always;
}

}

I can have one stylesheet only.

But all of this still does not solve my problem of how to get Firefox and Netscape to display proper page breaks.

[Dan Schulz]

Validating the code first might help .

Sorry I can't stick around and offer you some more concrete advice right now. I have to schedule a doctor's appointment (my cat bit me pretty deep on my right hand this morning, which makes typing very difficult) and pick up the prescription the ER wrote out for me, so not only do I have to leave soon, but I will be gone for a while.

[Ed Seedhouse]

I know I might have other problems in my stylesheet, but I am not into the complete validation part yet

The problem is that CSS is pretty picky with regard to errors and a lot of browsers will just give up after even a little bit of bad syntax. The code you are looking at may be perfectly valid but not being applied because of an error way back at the beginning of your stylesheet.

In my experience, keeping my stylesheet rules valid as I insert them is even more important than making my xhtml valid. Many browsers are quite forgiving of poor xhtml code but will choke on a small bit of bad CSS code, or at least that is my experience.

So I suggest you validate that CSS before trying anything else.

[Tyssen]

I can have one stylesheet only.

What's wrong with having two stylesheets? I think you'll a lot of sites have a completely separate print stylesheet and the print version doesn't need to be that complicated.

[AutisticCuckoo]

If things don't work the way you intended, always make sure that your markup and CSS validate before proceeding. If you are experienced and know what you're doing, you may leave certain validation errors that you know won't matter. But that's only if you're at Advanced Guru Level or higher.

Using separate style sheets for screen and print is very common. I actually prefer it that way, but YMMV. It's nothing to be afraid of, though.

[yanochka]

ok so my stylesheet validates now, i am still using the same style sheet for both print and media (which is correct and should not be a problem)...however this still has not resolved my problem in Firefox and Netscape.

page breaks are still being ignored..... any relevant tips?

[Tyssen]

i am still using the same style sheet for both print and media (which is correct and should not be a problem).

As using separate stylesheets has been the only suggestion put forward so far, why don't you actually try it instead of assuming it won't work?

[zcorpan]

Do these divs have end tags? Do the divs have any content? Does the link to the stylesheet have a media="" attribute (and if so, what's its value?)?

It's hard to give advice when we don't see the actual code.

[yanochka]

So here is an example of my code that does NOT work in Firefox but works in IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table>
<tr>
<td>
<div style="page-break-after: always">
This should print on page 1
</div>
</td>
</tr>
<tr>
<td>
This should print on page 2
</td>
</tr>
</table>
</body>
</html>

And I figured out that the problem in Firefox was due to the fact that the <div> tag was inside a <table> tag. The following code works perfectly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div style="page-break-after: always">
	This should print on page 1
</div>

This should print on page 2

</body>
</html>

So while I have solved this partially, now I need to find out how to get a table printed partially on one page and another in Firefox.

[yanochka]

I've solved my own problem!!!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table>
<tr style="page-break-after: always">
<td>
	This should print on page 1
</td>
</tr>
<tr>
<td>
This should print on page 2
</td>
</tr>
</table>
</body>
</html>