Web Page Display Vs. Print Preview Of Web Page

[antandsons]

I believe my HTML is in almost perfect, yet there is a HUGE difference between the web page (http://www.antandsons.com) and when someone tries to print it out, which can be displayed in print priview. Is there any particular reason for this, and how may I go about fixing it?

[marie b.]

Your stylesheet include should look like this :

 

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

[antandsons]

in place of the href i put the place where the css file is, correct?

 

I did this, and it doesnt work. The web page is all disconfigured.

Edited August 5, 2005 by antandsons

[marie b.]

Yep, it should look like :

 

><link rel="stylesheet" href="http://www.antandsons.com/style.css" type="text/css" media="print" />

 

And you need to replace that bit of code on your pages with the code above, yup.

Edited August 5, 2005 by marie b.

[antandsons]

I did exactly this, and the web page is not in the same formatting, etc. as it was before. It is totally off. Am I not doing this right, or is there another way?

[marie b.]

It looks exactly the same here.

 

Have you copied the above code exactly, and linked to the CSS file properly? I just copied the code as I have it on my site and substituted your link for mine, so it should work.

[antandsons]

<link rel="stylesheet" href="http://www.antandsons.com/style.css" type="text/css" media="print" />

 

I copied that into the header of the web page. What should I be doing to the CSS file?

[marie b.]

You don't need to alter the CSS file at all.

 

That link should work, as your webpage looks exactly the same as it did before for me.

[antandsons]

I just inserted the code into this page:

 

http://www.antandsons.com/termsofuse

 

Now look what happens to the web page.

Edited August 5, 2005 by antandsons

[marie b.]

Try deleting the <style type="text/css"> and </style> tags from your CSS file.

 

They don't belong there.

 

Also delete the commenting around the body field in your CSS file.

Edited August 5, 2005 by marie b.

[antandsons]

Okay, did that, but it still did not lead to a solution.

[marie b.]

Try this :

 

><link rel="stylesheet" type="text/css" media="all" href="http://www.antandsons.com/style.css" />

 

It may be an issue with the order of elements within the link.

[antandsons]

Changed the order of the elements. The page is back to normal, though the print layout is the same.

 

I am wondering maybe if there is another problem. For example, on some computer the content column (middle column with all the text) is really squeezed together, just like it is in the print preview screen. It's probably something with the style sheet that I have to fix. What do you think? Any suggestions?

[marie b.]

It does seem odd that a two columned, left-aligned layout shrinks when i minimize my browser, even though I'm on a high resolution.

 

I do notice that the commenting around the "body" in your CSS file is still there. See if removing that helps with the printing issue? It should look like :

 

>body { 
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 2px;
 margin-left: 30px
}

 

not

 

><!--
body { 
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 2px;
 margin-left: 30px
}
-->

Edited August 5, 2005 by marie b.

[antandsons]

I removed the commenting and it made the body ineffective.

 

Good catch. I just started shrinking my browser and noticed that the text in the center column did move as I moved the browser. How can i fix this?

[marie b.]

That would require altering the CSS.

 

I'd suggest looking at :

 

>#content {
      padding: 0px;
   padding-top: 0px;
      margin-top: 0px;
   margin-left: 150px;
      margin-right: 350px;
}

 

The right margin seems a big excessive.

 

Try changing 350px to 15%.

[TCH-Don]

Please keep in mind that the print css file should be a different css file than your screen file.

Copy the screen file and save it as something like print.css

edit it and charge parts you do to want to print

to display: none;

 

here is an example

>/*  print.css file */

/* set page to white with black type */
body {
background-color: #FFFFFF;
color: black;
font-family: Times New Roman, Times, Serif;
font-size: 18px;
margin: 1em 1em 1em 1em;
}



/* turn off items not to print */

hr {
display: none;
}


table.banner {
display: none;
}


td.menu {
display: none;
}

td.content{

text-align: left;
}


div.main_right_float{
display: none;

}


td.footer{
display: none;
}

 

then link them both

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

Now when you do a print preview it should look like it will when printed

and this requires no special action by the visitor.

 

hope this helps.

[marie b.]

What if someone wants to copy the page as is, though? It makes sense to have the media specified in the one link, in that case.

[TCH-Don]

It looked like the original question was to print the page with the TOS

There are many ways to handle printing with css.

Here are links to help

http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

http://www.w3.org/TR/REC-CSS2/media.html

http://www.alistapart.com/articles/goingtoprint/

 

 

Its just my opinion,

but most visitors that are going to print out something from a page

will only want the content

and not nav buttons, images or other common elements.

 

You can alway add the style to just one page for printout.

But thats up to you.

You can always leave off the media discriptor or set it to all.

[TCH-Rob]

Its just my opinion,

but most visitors that are going to print out something from a page

will only want the content

and not nav buttons, images or other common elements.

<{POST_SNAPBACK}>

 

I agree with this statement. Why waste the ink on something that will not be used as a reference?

[marie b.]

Some people need to print pages as is for school assignments.

Edited August 6, 2005 by marie b.