CSS Print Style problem

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Print Style problem

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> CSS Print Style problem

Page: [1]


gwmyers Posts: 9 Joined: 5/2/2006 Status: offline	CSS Print Style problem - 5/4/2006 14:55:32 Hello, I am trying to create a simple print style sheet for our Intranet. For some reason the content appears in the middle of the page and there is a lot of wasted space. I cannot post the site link because it is an intranet site. Attached is a screenshot of the print preview. Any ideas why this is doing this? Here is the CSS code: body { background: none; font-family: "Times New Roman", serif; font-size: 12pt; } #topcontainer, #menuSystem, #footer { display: none; } #content { color: black; overflow: hidden; } #title h4 { color:black; } a:link, a:visited { color: blue; background: transparent; text-decoration: underline; } Thumbnail Image Attachment (1)


caz Posts: 3626 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	RE: CSS Print Style problem - 5/4/2006 15:15:02 In this #content { color: black; overflow: hidden; } Have you any margins or padding set on the left in the screen stylesheet that could be innfluencing it? If not then you could just play with margins for the printer. _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to gwmyers)


gwmyers Posts: 9 Joined: 5/2/2006 Status: offline	RE: CSS Print Style problem - 5/4/2006 16:25:00 Thanks Caz for the reply. I certainly do have settings for the #content screen style. Here is what I have in the screen style... Is there a way I can override this in the print? #content { overflow:auto; position:absolute; z-index:-1; top:145px; bottom:135px; left:160px; right:0; background:#fff; } (in reply to caz)


caz Posts: 3626 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	RE: CSS Print Style problem - 5/4/2006 18:44:58 top:145px; bottom:135px; left:160px; Try zero-ing these and see where that places it in print preview - without seeing the page I am only guessing of course and I think that you will have to do the same You will probably have to give it some measurements so don't forget to do it in pts as you did before. _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to gwmyers)


gwmyers Posts: 9 Joined: 5/2/2006 Status: offline	RE: CSS Print Style problem - 5/9/2006 13:45:08 Caz, I did what you suggested and zeroed the "top", "bottom" and "left". Then I did a print preview and now the print version looks good, but now my screen version is not aligned anymore. The screen version is more important than the print...I just thought that if it is possible, it would be nice to have the print option available. Maybe I am not doing something correctly because it seems like this should be possible. Were you suggesting that I change the measurements to pts on my screen version? (in reply to caz)

caz

Posts: 3626
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline

RE: CSS Print Style problem - 5/9/2006 14:17:56

quote:

Were you suggesting that I change the measurements to pts on my screen version?

Nooooo... points are for printers, not for screen use. How are you feeding the print styles, in a separate stylesheet or within the main stylesheet? You can do it either way but it has to be a set of instructions that amend the main screen styles just for print without affecting the main screen style.

external -

<link type="text/css" media="screen" rel="stylesheet" href="main.css" />

<link type="text/css" media="print" rel="stylesheet" href="print.css" />

or, within the main style sheet you can use the @media rule like so,

@media print {
#wrapper {
text-align: left;
border: none;}

#main-title {
display: none;}
#left {
display: none;}
#right {
display: none;}
#footer {
display: none;}
#footer div {
display: none;}

h1 {
margin:0; 
font-size: 1.2em;
font-weight: bold;
background-image: none ;
border: none;
padding-left: 0;}

#centerpad {
margin: 0 1em ;
padding: 0;
page-break-inside: avoid;
text-align: justify;}
}

etc, etc.

This link might explain it better than I can

http://www.meyerweb.com/eric/articles/webrev/200001.html

Good fun this CSS malarky isn't it?
Cheers,
Carol

< Message edited by caz -- 5/9/2006 14:23:16 >

_____________________________

Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk

I remember when it took less than 4hrs to fly across the Atlantic.

(in reply to gwmyers)


gwmyers Posts: 9 Joined: 5/2/2006 Status: offline	RE: CSS Print Style problem - 5/9/2006 15:12:54 That's what I thought...points are for printers. I am using a separate stylesheet. Thanks for the link. I have read it and have it bookmarked. Yes indeed...CSS is trying my patience at times. Cheers, Gayle (in reply to caz)


gwmyers Posts: 9 Joined: 5/2/2006 Status: offline	RE: CSS Print Style problem - 5/9/2006 17:03:09 Yeah...I got my content lined up. I had to enter negative numbers to get it lined up. I always seem to stopped at "top=0; left=0;, but this seems to work. Now I can't get my logo to show up. I will keep plugging away at it. It's always something. Thanks Caz for your help. #content { top:-50px; left:-100px; } (in reply to gwmyers)