CSS - @media Print Expert Help Needed: Firefox Will Not Justify 10px Text...

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.

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

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

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,

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

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...

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

You know when you do text sentences on one line then you do the text-align:justify to spread out the whitespace between words to make the sentence fit the maximum length.

I was wondering about the image tags instead of the words. Because for some customers, he/she would see one image while some other would see 3 images while some other would see 5 images. I just couldn't figure out how to use even spacing between those images. Is there a way to accomplish that with CSS and div tag?

Thanks...

edited: What!! 3 days later and no one know the answer. How interesting... Um, look like I'll have to bit the bullet and use the margin-left and margin-right properties in a class for each image. It's the best I can do but it will also be a problem if I have 5 images in a row where image #1 at the left and image #5 at the right would push the web layout wider or overlap something.

Usiing ONLY CSS, is it possible to "justify" a block of text and have the last line centered?

For example:

Code:

Fig. 13.  Scatter  diagram  comparing  two  subspecies  of
Nyctimene albiventer.  One individual of specimens thought
to be intergrades is as large as  specimens of Nyctimene a.
bougainville, whereas the other three intergrades are about
     the same size as specimens of N. a. minor.

CSS seems to only offer one or the other

text-align:justify; or text-align:center;

Thanks.

Hi all

I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page.

This probaly isn't possiable but you never know. Any Ideas would be helpfull

Nick Carlevaris

Hi all,
I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified.

How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments.

Thanks in Advance.

- John

Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">

<head>
<title>CLOColors3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
<link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" />

the print css:
Code:

	  @media print {
		 html{
			height:auto;}
		body{
			background-color:#FFF;}
		#header{
			display:none;}
		#body{
			position:relative;
			background-color:#FFF;
			background-image:none;
			height:auto;
			width:auto;
			left:0px;
			top:0px;
			z-index:0;
			padding-bottom:0px;}
		#textbox{
			position:relative;
			overflow:visible;
			float:none;
			margin-left: 0px;
			top: 0px;
			width:auto;
			bottom:0px;
			background-color:#FFF;
			border:hidden;
			border-color:#FFF;
			z-index:0;
			padding:0px;}
		#textbox img{
			display:none;}
		.searchbar{
			display:none;}
		#linkbar{
			display:none;}
		.map{
			display:none;}
		.video{
			display:none;}
		#linktext{
			display:none;}
		#clear_both{
			display:none;}
		#menu{
			display:none;}
		#footer{
			display:none;}
		}
	

Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!!


UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive.

I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page.

This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly?

I've got a pain of a problem.

Firstly I've got my styles as
Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css" media="screen">
	@import "/screen.css";
</style>
<style type="text/css" media="print">
	@import "/print.css";
</style>

The problem is that IE 5 & 5.5 seem to ignore the media attribute on the style blocks so they include all the styles.

I read somewhere that using @media will solve this problem, so I did:

Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css">
	@media screen {
		@import "/screen.css";
	}
	@media print {
		@import "/print.css";
	}
</style>

This works fine in IE 5.x and IE 6, but now for some reason Firefox (1.0.7) is not including ANY of the imported sheets. However if I add normal rules within the @media ... {} sections then they are applied.

Can anybody verify this, and does anyone have a solution?

Thanks in advance,

-D

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