Hey Everbody!

I have been playing around with creating borders using CSS. The border works great when viewing it from the browser. However, when my users print the document from the browser it cuts the border off and then resumes it on the second page. What I would like is for the border to close at the page-break and begin to wrap the text in the border on the next page (from another border). This is a report that is generated 'on-the-fly' so sometimes it fits into a page. This works fine. More than one page becomes a problem.

If anyone has any suggestions, I would be very grateful!

Thanks,

Nick

Nick -- this will answer your question

TravelAgent,

Thanks for your reply. I have already considered this option. I would rather not have to use multple sytle sheets if possible. This form is generated as output from another program and I want to retain formatting (borders), not remove it. When I look at example implementations that involve linking style sheets for the purpose of print formatting, they are usually for simplifying a document. I may have to default to a, 'print friendly' button if I can't find a workaround.

-Nick

Nick -- if you're trying to print a form, that's a different coding ... is that what you want people to print, as your post wasn't exactly specifically clear as to what you want to accomplish.

I wanted to verify this before I told you anything further -- what you want will require 2 different CSS stylesheets, as there's simply no way around that ... you can try the solution as shown here or simply resort to a "print friendly" button, as you stated.

Thanks agian...

I may just have to try to generate the sytle sheets at the time the form is created. What I am really concerned with is how to get my borders to appear on the paper media correctly. As I have it now, the border breaks at the page break and completes on the next page. I would rather have the logic in my CSS to just make multiple borders if several pages exist. Does that make sense?

-Nick

Although you may not realize it, the Web is a multi-medium information source. No, I'm not talking about multimedia-- audio and video streams, for example-- but the actual medium through which the Web's content is conveyed to us. For the vast majority of users, the medium is visual: the monitors we use every day to display pages. But there are many who also turn to the medium of print, creating "hard copies" of pages using their laser printers.

Restyling for Print
Let's now look at a real example of alternate-media stylesheets -- unfortunately, Navigator 4.x does not support alternate media on any platform, so the code won't be much help.

First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on ... we want to display it differently depending on whether it's on a monitor, or on paper.

First we write a stylesheet for screen display (remember, there's no accounting for taste):

/* screen display styles */
BODY {color: silver; background: black;}
A:link {color: yellow; background: #333333; text-decoration: none;}
A:visited {color: white; background: #333333; text-decoration: none;}
A:active {color: black; background: white; text-decoration: none;}
H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;
border-bottom: 1px solid gray;}

All right, now we need to decide how the printed page should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this:

/* print styles */
BODY {color: black; background: white;}
A:link, A:visited {background: white; color: black; text-decoration: underline;
font-weight: bold;}
H1, H2, H3 {background: white; color: black; padding-bottom: 1px;
border-bottom: 1px solid gray;}
DIV.adbanner {display: none;}

Now, to the top of the document, we add the following LINK elements:

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

Hopefully, this will solve your problem.