CSS - Using Media=print Stylesheet: Fixing Inapropriate Page Breaks

I put together the following site ... http://www.themax.co/

I am trying to create a style sheet for the PRINT pages, but I ran into some problems (the main site looks fine, but the print page doesn't).

First, go to the page...
http://www.themax.co/?page_id=6
When you go to print, and look at the print preview (in Firefox). most of the content is pushed to the second page. I assume this is because of the style .pagesidebox (which is a column that spans the entire page) ... I think this is causing the rest of the content to go to the next page. Any idea how to fix this?

Second, I have a logo that goes against the black background (on the website) and a white logo that is supposed to appear on the print page. So, in the print.css stylesheet, I called the background-image to point to the new image. However, the new image is not showing up when printing. I assume this is because the image is a BACKGROUND image, and the print settings are set to NOT show backgrounds. Is there a way around this (using CSS)? Since there are two logos (one on white, and one on black), I can't place the image inside the html page (I have to use CSS).

Please let me know. Thanks!

Hello,

I understand that there are at least 7+ media types for CSS and more may be added later.

http://www.w3.org/TR/REC-CSS2/media.html

I want a special stylesheet for print but all other media should use the same stylesheet. Code:

<style type="text/css" media="print">@import "print.css";</style>
<style type="text/css" media="all except print">@import "main.css";</style>

The following is a bad idea because it does not cover media that may be added in the futu Code:

<style type="text/css" media="aural, braille, embossed, handheld, projection, screen, tty, tv">@import "main.css";
<style type="text/css" media="print">@import "main.css";

One of the websites, that I frequently visit, uses different stylesheet for printing.
I want the same (i.e. "screen.projection") stylesheet to be used while printing. I will like to have a bookmarklet that will disable the "print" stylesheet mentioned on the second line in the following example.

<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "/style/main.css"; /*]]>*/</style>

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

Shantanu Oak
shantanuo@yahoo.com

I've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors.

This is at the end of my .css document that I linked to my html:

Code:

 @media print {body {font-family: arial, helvetica, sans-serif}
               a {text-decoration: none; color:pink}
               img {border-width: 0px}
               #hideprint {display: none}
               #instruction {display: none}
               #lpmap {page-break-after: always}
               .notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}

Thanks

In the media=print style sheet I want to change the location
of the div containing the material to be printed.
Using this in the print style sheet does not move the div.
#divname {position: absolute; left:50px; top:100px; width:200px;}

Can a div be moved with a new style sheet.

Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way?

Will this work as I hope?
Code:

div.news {
    width:690px;
    padding:10px;
    margin:0;
    float:left;
    background-color: #DDDDDD;
}

.button_div {
    width:180px;
    padding:10px;
    background-color:#953956;
    cursor:pointer;
}

.body_text {
    color:#284186;
    line-height:130%;
    font-size:11px;
}

@media print {

 div.news {background-color:#EEEEEE;}
 .button_div {display:none;}
 .body_text {color:#000000;}
}

Also, is it ok to do this? Any issues I should be aware of?
Code:

// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}

// HTML
<p class="italic large">Italic and large.</p>

Thanks,

Hi,

For some reason my css sheet for printing is producing huge text on the printouts in the main section of the page and I can't figure out why.

style sheet included by:
<link rel='stylesheet' href='print.css' type='text/css' media='print'>

section in question:

.pr{color : #000000;
font-family: verdana;
font-size: 10px}

for some reason the font size is being ignored and the text come s out massive.

the whole code for the page is too long to post but the section in question has a lot of tables enclosed in:

<span class='pr'>
</span>

I know the stylesheet is being included properly cos it is hiding lots of other sections.

Anyone got any ideas?

Thanks

Hi

I am really struggling to get my print stylesheet as it is.

The site is http://calibrehr.com/new/

and the stylesheet is http://calibrehr.com/new/print.css

If you print preview say the home page in firefox it cuts off the text at the bottom. IE displays this page ok.

Could someone please give me some help with reagrd to this problem, and any advice on making print stylesheets!!

Thanks alot!

Hi

I have a legacy site which is laid out in tables, and rather large. There is a cell holding a table which holds, amongst other things, a link to a couple of js scripts which generate a dynamic menu.

I have been trying to use a media=print stylesheet to set display:none on that cell (which I have given an ID). This works fine in terms of the static content in that cell - the adjacent 100% width cell 'expands' leftwards to fill the gap, which is what I want, but the menu is still being generated over the top. The links to the two scripts are within the <td> which has been hidden by the css, but the menu is still being generated.

I would convert the whole site to css pos if I had the time...

Hello! Newbie back again. I'm rolling along on using CSS for the first time (hooray!) including that wonderful bit of coding in order to center a #Container. The threads here have been *very* helpful.

Due to printing problems with having everything centered at a fixed width (text on the right getting chopped off), I've created a style for media="screen" AND media="print" which works just fine in Netscape and IE.

Question: When I pull the style out of the page so that I can reference it as an external css, do I need to create TWO files?

Also, I would appreciate any/all comments about my first attempt so far. Is there a better way I should be designating font-family and margins for my elements?

<style type="text/css" media="screen">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold; margin:0.4cm 0.4cm}
p {font-family:sans-serif; font-size:85%; margin:0.4cm 0.4cm}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%; margin:1cm 1cm}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
html, body {margin: 0; padding: 0; text-align: center; /*for IE stupidity*/}

#container
{
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
width: 700px;
border: 1px solid gray;
text-align: left; /*corrects for IE hack*/
padding: 0px;
}
</style>

<style type="text/css" media="print">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold}
p {font-family:sans-serif; font-size:85%}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
</style>

And here's the page I'm working with so far:

http://www.accd.edu/sac/lrc/librns/celita/design/linktest.htm

Thanks so much for all your help.

Hi folks,

I am getting this error and it makes little sense to me. I am getting the following warning...


Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 ,
Add a CSS style sheet for print media, or include a print media section in the current style sheet.


here is my code

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


Thanks once again in advance for any suggestion or help!

whonoes

Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad!

Please consider the following code:

Code:

<html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;} 
}
</style>
</head>

<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>

This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing.

More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem.

I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help!

Thanks in advance,
Angelos

Quote:
Dan Cederholm of SimpleBits:

It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work.


I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden.

At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden.

However, when I do try to reduce the alt sheet to just:

Code:

#container { width: auto; }

#main { width: 65%; }

#navbar { width: 30%; }

all unincluded formatting is lost.

Am I doing something wrong?

Cheers, Sam.

Using code from this example, I've modified a 15 column (ColdFusion) table to have fixed headers. I've got it working/displaying quite nicely in both IE and Firefox/Netscape, but am having two seperate browser problems when I print the page. Here's the print CSS I'm using Code:

<style type="text/css" media="print">
div.tableContainer {overflow: visible;	}
.tablenoscroll>tbody	{overflow: visible; }
thead td	{font-size: 11pt;	}
tfoot td	{
	text-align: left;
	font-size: 9pt;
	border-bottom: solid 1px slategray;
	}
thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; } 
</style>

The problems I'm having are...

1) IE prints like crap. The table's 15 columns don't fit on the page (but they do in FF/NS...does FF/NS have an automatic "shrink to fit" feature?), the rows wrap between pages (they break nicely in FF/NS), and the font is big...overall it's just plain ugly. For a report with 252 rows, IE takes 18 pages to print, whereas FF/NS only takes a tidy 6 pages to print. I guess the good news is the headers do indeed repeat at the top of each page...

2) After the report table, there's a separate "Report Summary" table. IE prints this at the end of the report table (where it should be), but FF/NS print this summary table within the report table...so I'm getting some sort of overlapping error when I print in FF/NS. I wrapped the Report Summary in <DIV CLASS="summary"> tags but everything I tried with DIV.summary {} positioning in the media="print" CSS didn't do the trick.

I'd love it if anyone had help/advice on both of these problems and/or if there's a better way to do this (fixed table headers on the screen, and repeating headers when you print). Thanks

Hi

I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window.

So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600.

And if its not fixed, then the page is stretched when you enlarge the window.

Cheers