Solved

CSS Printing Web Page Content, Cuts off lines.

Posted on 2006-07-24
5
422 Views
Last Modified: 2008-02-26
Hello,

I am trying to set the styles for a page to print. I have the CSS set to print just the main column.

 @media print{

  #leftcol, #top, #footer { display: none; }  
  #maincol { position:absolute;  top:0; float:left;  width:6.25in; }

}



The html consists of about 8 or 9 pieces of code just like the following:

<div class="depttitle">Win Cramer - Director of Purchasing</div>
<img src="/images/win-cramer.jpg" class="leadership">
<p>Win began his career here in 2000 as an Associate Buyer, mentoring under the VP of materials. He was promoted to the management team in 2002 as Director of Purchasing. <br><br>
Win oversees the Purchasing department, and is responsible for raw material product procurement and assembly into finished inventory.  Additionally, Win works closely with a global supply team that is responsible for the creation and design of experience-enhancing consumer products under the company's  brand.   On a daily basis Win supports the sales force in keeping pace with the volatile RAM, Flash, and consumer products markets. <br><br>
Win graduated from the University of Oklahoma, and enjoys riding motorcycles, camping, fishing and spending time with his wife.</p>

The problem in IE, is that the final line on a page usually is split in half, horizontally. the line height is half on the bottom of the page, and half at the top of the following page. In FF, the printing is completely messed up. I have tried inserting some of the page-break-after / page-break-before elements to specify exactly where to make the page break, but have been unsuccessful in getting them to work. I also assume there is some margin attribute to tell the browser not to extend to the farthest point vertically on the page.

Any help would be great, thanks.
0
Comment
Question by:JF0
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 250 total points
ID: 17173380
remove all absolute positioning and it should work correctly.
0
 
LVL 16

Author Comment

by:JF0
ID: 17175375
that works great in IE, except the position on the first page where it starts is probably about 3 inches down (i think because i have a css dropdown menu at the top?) but that is ok.

Still is VERY messed up when i print preview in FF. In FF print preview, the text runs between the images of the pages, like printing on air if that makes sense. (will except your answer for main answer, and award additional points if someone can fix my FF problem.)
0
 
LVL 16

Author Comment

by:JF0
ID: 17175447
Also is cut off on the right side in FF and shows the top menu on a page by itself, whereas in IE doesnt show it at all.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17175771
Printing works best with very simple layouts.

> Also is cut off on the right side in FF
Make sure your width is set to "auto".

> and shows the top menu on a page by itself
That happens a lot in FF and it's very hard to know exactly why it happens and how to fix it.
The best solution i found is to use the least "container" elements as possible and avoid using borders.
But even with that, i get some unwanted page-breaks on some pages...

For a more detailed answer, we should get a link to a page that has the problems you described...
0
 
LVL 16

Author Comment

by:JF0
ID: 17179303
Sorry, its an intranet page, and i don't have an outside server with asp support.

The width is set to 6.25in

The only div i want to print on any of my pages is the main column (maincol). When i do print preview, I can actually hover over my menu and watch it change, it is real weird.
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 59
Obsolete font tag need to convert to CSS 3 53
Execute jQuery after Function 4 38
Loading Self-Hosted Fonts 12 43
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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

739 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