@Media Print CSS 7

[1DMF]

I'm a litle confused as to what i'm doing to create a print CSS file.

How I make stuff disapear so only part of the page is printed.

i'm concerned this means creating loads of unnecessary div's to surround parts the page, using additional classes not used else where just so i can hide them on print.

is that correct?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

whatever stuff you don't want to appear on print, give them a display: none style setting. maybe you'd have to surround the area with an identified div, or maybe you can do this through other means. it depends on your document setup.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

Make a completely seperate stylesheet for print.
The media instruction loads the relevant one in.

So, in your new spanky print stylesheet you can, as cLFlaVA says, just display:none anything in your document you don't want to print. Or even the other way around come to that.
For example, on my company site I have hidden address and contact info that only shows up on a printed page (none of the decor shows and the text is reformated to a standard page layout)

http://www.targetgroup.co.uk

<- there

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Vragabond]

Say you have an id on the element you do want to print. Then you just do this:

html * {
  display: none;
}

#myPrintedDiv {
  display: block;
  width: 100%;
}

And everything else you want the printed div to look like.

 

[1DMF]

I can't get it to work.

I have an external media=print css file no probs, i create a div as follows

<div id="statement" style="overflow:auto; overflow-y:scroll;  border:none; width:799px; height:540px;"></div>

the print css file has the following

body
	{
	color: #000000;
	font-family: Arial, Verdana;
	font-size: 12pt;
	background-color: #ffffff;
	}

.titlecell
	{
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;
	}

hr {
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: #233e97;
	background: #233e97;
}

.blank
	{
	border: 0px;
	}
	
H1	{ 
    font-family:Verdana,sans-serif; 
    font-size:12pt; 
    font-weight:bold; 
    text-decoration:underline; 
    margin-bottom:0%; 
    margin-top:0%;
    }
			
H2	{ 
    font-family:Verdana,sans-serif; 
    font-size:9pt; 
    font-weight:bold; 
    text-decoration:underline; 
    margin-bottom:0%; 
    margin-top:0%;
    }
			
.txt1	
    { 
    font-weight:bold; 
    text-decoration:underline; 
    }
			
.txt2	
    { 
    text-decoration:underline; 
    }
    
html * {
  display: none;
}

#statement
    {
    display: block;
    width: 100%;
    overflow:auto; 
    }

print preview gives me a completely BLANK page, except for header & footer (doc name and page no)

any ideas?


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

your inline styles are likely overwriting your external stylesheet styles.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

nope that's not it, i just changed it so the div for the screen CSS now has

#statement
    {
    overflow:auto; 
    overflow-y:scroll;  
    border:none; 
    width:799px; 
    height:540px; 
    }

the div is now defined like so

<div id="statement"></div>

i still get a completely blank page when printing



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

don't you think this has something to do with it:

html * {
  display: none;
}

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

so

Vragabond (Programmer) 8 Dec 05 12:25
Say you have an id on the element you do want to print. Then you just do this:

CODE
html * {
display: none;
}

#myPrintedDiv {
display: block;
width: 100%;
}
And everything else you want the printed div to look like.

doesn't work, is that what your saying.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

no, i am saying your code is wrong. you will need something like:

#statement
    {
    overflow:auto;
    overflow-y:scroll;  
    border:none;
    width:799px;
    height:540px;
    [red]display: block;[/red]
    }

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

no, that doesn't work either.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[1DMF]

i'm confused why do i need

display: block;

in the SCREEN css file, how does that effect printing, I thought the whole point was the PRINT css controlled the output.

I'm obviously missing the point somewhere can anyone enlighten me?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

In the print sheet.
The selector

html * { display:none; }

effectively hides everything.

Then the

#myElement { display:block; }

Makes the particular element visible again.

I've not tested this exact scenario, the html * selector may not work in some browsers.
My approach was much more labourious, I manually hid the things I didn't want to show.

If I get 10 mins I'll do a test to confirm whether the html * works or not. I thought it should, but cLFavA (and yourself) thinks not.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[1DMF]

it seems even though i have specifically placed the #statement css bit after the html* it still does not display.

i wish it would coz that would be my problem solved, well as long as it then printed ok - lol, so i'm sure my head is going to get redder before i've cracked this thing.

thanks for your help so far

regards,
1dmf

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

It is possibly a specificity issue. Try this:

#myElement { display:block !important; }

Of course, you will need to ensure that you have an element on the page with an ID to match (id="myElement")

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

That doesn't seem to work either, i used this..

#statement
    {
    display:block !important;
    width: 100%;
    overflow:auto; 
    }

is the only way round this to start plastering the code full of excessive DIV tags, just so i can hide them piece by piece to print?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BabyJeffy]

Can you confirm how you are linking to the print.css? I'm thinking there may be a typo, or something missing in there.

Also, the print.css goes last after all the other CSS (usually) to avoid your styles in print.css being redefined. You can negate other CSS interfering with printing by specifying the media attribute for your other linked stylesheets... and specifically setting them to screen (and anything else except print).

Cheers,
Jeff



[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[1DMF]

here are the only two CSS files used and how I link them...

this is just before the closing head tag after all the JS...

<LINK rel="stylesheet" type="text/css" href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/fsa.css"[/URL] >

this is the print css

<link rel="stylesheet" type="text/css" media="print"  href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/statprint.css"[/URL] />

which is just before the </body> tag.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BabyJeffy]

Ah. I think I see it. Move this declaration to the very top of statprint.css and try it.

html * {
  display: none;
}

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? faq216-6094

 

[1DMF]

nope that didn't do it, still all i get in print preview is a blank page.

:-(

after all this hard work under the belief you could create a simple print CSS and now it doesn't work.....programming can be soul destroying at times.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.