Solved

Printing Problem -- Right Side of Page Cut Off

Posted on 2004-08-24
19
3,200 Views
Last Modified: 2008-01-09
OK, I'm sorry if this is a familiar question, but I have been unable to find a solution to my problem. The right side of my web pages are getting cut off when printed from Windows machines, and I've been unable to fix it. You can view the page at:

http://hr.washcoll.edu

I tried linking it to a print style sheet at:

http://hr.washcoll.edu/print.css


But it didn't work, and I am wondering if it is possible to fix this problem using CSS if I have hardcoded table widths in my code -- do I have to go back and change all of these table widths (arrrrrgh!!) or is there a quick and easy way to fix this using CSS or some other trick? Please help.

thanks,
Ted
0
Comment
Question by:ted_knight85
  • 5
  • 5
  • 5
  • +1
19 Comments
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 60 total points
ID: 11883698
Hi

Well, there's no quick way, but there's a quick way to fudge it a little that works on newer browsers, specifically IE:

<style type="text/css">
   @media print {
      body {writing-mode: tb-rl;}
   }
</style>

Regards,
Zyloch
0
 
LVL 13

Expert Comment

by:flow79
ID: 11883821
i believe the optimal printing width is 640px.  hope that little tidbit helps.  That way if you do hardcode it, dont go over 640px for your print version.
0
 

Author Comment

by:ted_knight85
ID: 11884128
Zyloch,

Thanks for that suggestion, but I inserted the code and it is still not working on IE 5.5, Windows -- http://hr.washcoll.edu

Is that bit of code only good for 6.0? Any cures for IE 5.5?

Thanks so much for helping, I appreciate it.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 31

Accepted Solution

by:
seanpowell earned 65 total points
ID: 11884223
>>do I have to go back and change all of these table widths
Yes :-)
If you need to stick with using tables to layout the site, then try and reference everything with id's and classes in the stylesheet. At least that way you'll cut down on the maintenance headache in the future... (and use percentages in your widths for optimum portability)

As an example:

<style type="text/css" media="screen">
#holder { width:780px; }
#banner{ width:780px; }
#nav { width:200px; }
#content { width:580px; }
</style>

<style type="text/css" media="print">
#holder { width:100%; }
#banner{ display:none; }
#nav { display:none; }
#content { width:100%; }
</style>

<table id="holder>

    <table id="banner">
    <table id="nav">
    <table id="content">

</table>

Thanks,
Sean
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11884248
Well actually, my code is only supposed to try to force your page to print in landscape mode and is unpredictable at best. Just wondering, what would happen if you take the @media print {} out of the picture and only leave the tb-rl part.
0
 

Author Comment

by:ted_knight85
ID: 11884336
Thanks, Sean -- this is what I feared.

Zyloch, I changed that bit of code, but same result. Thanks for trying.

One last question -- is there any way to use CSS to make the page be printed out at say 90% or 80% of its actual size, and override the image widths and table widths this way?

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11884474
You're grasping now aren't you :-)

I'm not aware of any way to do that, at least not reliably and have the text be legible.
You've unfortunately run into the hardcoded, laid out in tables, non-flexible web page that we strive to move away from. The good news is that it will only need to be done right once...

I think your best frined now will be a really good Find and Replace tool :-)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11884481
Not to my knowledge. I'm willing to bet ScriptX http://www.meadroid.com/scriptx/index.asp has some method of doing it with Javascript, but it's probably not in the free version, and it's ActiveX so IE-only and security messages abound.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11884487
I love Find and Replace. Now, if only they could make a Find From Delete and Replace :-)
0
 

Author Comment

by:ted_knight85
ID: 11884596
Thanks All!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11884616
Ouch, a grade of B :-(
0
 

Author Comment

by:ted_knight85
ID: 11885343
Sorry about that -- didn't realize that was a bad grade, I meant it as a positive mark -- was just looking for a quick and easy solution -- probably does not exist. Is there a way to change the grade? I would happily give you an A for your help, didn't realize B was a bad thing.
0
 
LVL 13

Expert Comment

by:flow79
ID: 11885358
if you want to change the grade, put in a thread into Support and ask the moderator to change it for you.

0
 
LVL 13

Expert Comment

by:flow79
ID: 11885461
just to clarify for you about the points.

A = 4 times the question points
B = 3 times the question points
C = 2 times the question points
D = the question points (only Moderators and Page Editors can award a D grade)
0
 

Author Comment

by:ted_knight85
ID: 11885510
Thanks.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11885529
Heh, B isn't that much of a bad grade, sean you're just overreacting, but an A would be nice :)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11885544
No, I was just bored... I'm totally fine with it :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11885766
>>only Moderators and Page Editors can award a D grade

I didn't know I could do that ( evil grin lurking... )
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question