Solved

Printing Problem -- Right Side of Page Cut Off

Posted on 2004-08-24
19
3,180 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 65 total points
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I love Find and Replace. Now, if only they could make a Find From Delete and Replace :-)
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:ted_knight85
Comment Utility
Thanks All!
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Ouch, a grade of B :-(
0
 

Author Comment

by:ted_knight85
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks.
0
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
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
Comment Utility
No, I was just bored... I'm totally fine with it :-)
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>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 Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now