Moving body text cell in CSS print stylesheet

[staciann]

I have a site layed out in tables. I have created a CSS stylesheet for print that hides the sidebar and topbar so only the body text shows. I used {display:none} to hide those items which are in <div> tags. This works fine.

My problem is that the body text still wants to print where it's located on the page - about 3 inches in from the left. I tried making the margin negative but then the text gets covered up by the hidden section to the left.

How can I move the body text over a few inches so it uses the page efficiently?

Thank you for your help!
Staci

 

[traingamer]

Are those divs that have display:none within tables? If so, do they have a specific width for the columns?

(Need a little more info so we're not just guessing).

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[staciann]

Yes, the divs are within tables and they have set widths and heights.

 

[monksnake]

Make a CSS style specifically for printing. A really cheap way of doing this is to set the body tag to a negative left margin in an external stylesheet. Here's how you would put that stylesheet into the HTML page:

<link rel="stylesheet" type="text/css" href="filename.css" [!]media="print"[/!] />

[small]"I see pretty girls everywhere I look, everywhere I look, everywhere I look. - Band song on movie "The Ringer"[/small]
<.

 

[staciann]

That's exactly what I did.
When I set the left and top margins to negative though, the text moves into the correct position, but you can't see whatever is in the negative part...it's covered by white. I have no idea why. The objects to the left are set to {display:none}.

 

[monksnake]

How about this, on the objects hidden to the left, define their height and width as 0px in your print stylesheet. Am I sure that will work? No, but it's worth a try.

[small]"I see pretty girls everywhere I look, everywhere I look, everywhere I look. - Band song on movie "The Ringer"[/small]
<.

 

[staciann]

If you click here it shows what the text is doing.
<a href="

http://photobucket.com"

target="_blank"><img src="

http://i40.photobucket.com/albums/e245/mitchstaci/printexample.jpg"

border="0" alt="Photobucket - Video and Image Hosting"></a>

 

[staciann]

Setting the width and height didn't work.
Good try though =)

 

[eyec]

maybe this will give you some tips on formating for printing using stylesheets. not sure if it will help in tables.

 

[Vragabond]

Do not limit yourself with the print stylesheet. If you add media="screen" to your regular stylesheet you will notice that in printing there are no styles at all and you can start anew. But you don't need to do that. For the sake of the argument, let's assume your table is defined in your main CSS as follows:

#myTable {
  width: 600px;
  margin-left: 200px;
}

In your print stylesheet, you would simply work into reversing this:

#myTable {
  width: 100%;
  margin-left: 0;
}

You can do same with floated elements (float: left; vs float: none and many more. Don't use your print stylesheet just for an occasional display: none;. You can do so much with it.