[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Printing Problem -- Right Side of Page Cut Off

Posted on 2004-08-24
19
Medium Priority
?
3,248 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
18 Comments
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 240 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Accepted Solution

by:
seanpowell earned 260 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month19 days, 18 hours left to enroll

872 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