Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

@Media Print CSS 7

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
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.
 
Sort by date Sort by votes
Why not create a new simple test page with print and screen CSS that work (with only a few elements), and then try and migrate that to your existing site.

Tryng to retrofit something you're not sure of is never easy.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
nope doesn't work....here is my simple test...
HTML as follows ...
Code: 
<HTML><HEAD><TITLE>Commission Statements</TITLE>

<LINK href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/test.css"[/URL] media=screen type=text/css rel=stylesheet>
<BODY style="height: 100%" topmargin=0 height="100%">
<CENTER>
      <TABLE class=table  width=160 border=0 valign="top">
        <TR>
          <TD class=titlecell>
            <CENTER>Select Statement</CENTER>
	</TD>
	</TR>
        <TR>
          <TD class=table vAlign=top align=middle height=280>
            
            <DIV id="statement">THIS SHOULD PRINT</DIV>
</TD>
</TR>
</TABLE>
<LINK media=print href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/statprint.css"[/URL] type=text/css 
rel=stylesheet>
</BODY></HTML>

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

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

statprint.css ...
Code: 
html * {
  display: none;
}
    
#statement
    {
    display:block !important;
    width: 100%;
    overflow:auto; 
    }

no matter what i try all i get is a blank page?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
i've even tried
Code: 
body * {
  display: none;
}

same thing - a blank page

[banghead]


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
With markup that bad, you've no hope of getting anything to do anything. You've no close head tag, you're using non-standard attributes, and deprecated attributes.

Try making a test harness that validates before trying to fix the bugs.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
non-standard attribs and deprecated ones ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
let me get this right i have to show all elements surrounding the DIV tag.

so
Code: 
<div id=1>
    <div id=2>
     <div id=3>
       Some Text
     </div>
    </div>
   </div>

to show element 3's text i have to show element 2 & 1

sorry i'm not clued up on what is a parent to who.

isn't the HTML a parent to everything, then the HEAD then the BODY etc... so if you have to show the parents, isn't that showing the whole document.







"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
lol
Well - that depends on the DOCTYPE in use - but you've not used one, so I'll concede that point.
Click to expand...

i just happen to be on w3c...
Below are the results of attempting to parse this document with an SGML parser.

Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"
Click to expand...

i thought you could IMPLY HTML, but what confuses me is this
Error Line 5 column 6: end tag for element "HEAD" which is not open.
</HEAD>
Click to expand...
when you were quite right the end HEAD tag was missing, i added it and now get that, what is going on?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
it's not gonna be a nice task putting divs around what i don't want, but like you say, until I improve my understanding of the DOM and related functions, I think you could be right!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
actually thinking about it, is there a way to print the heirachy of the DOM nodes on a page, so I can get a better view and understanding of parent/child relationship of the DOM

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
sorry to keep coming back with yet more questions but i'm really pulling my hair out here.

W3C now say's this
Error Line 2 column 5: element "HTML" undefined.
<HTML>

by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.
Now I'm positive 100%, that when I started coding HTML, it was common GOOD practice to use UPPERCASE for tags, I read this many times and some condemed my code because they weren't uppercase, personally i don't even think about what case the tags are, most generated HTML from other sites use uppercase tags, me i'm inconsistant, now I can understand improvements in the specification, technology changes, tag implementation and some deprecation, but changing something like CASE for the sake of it is ridiculous.

anyway, enough of my usual rant, the point is I chose to validate on W3C via the HTML Validation option not XHTML, I got a "No Doctype" error, i used the link on there page to add one, and now I get an error moaning about XHTML syntax.

so can you please supply me with a valid HTML doctype statement, or is W3C trying to force me to port over to XHTML?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
Click to expand...
Click to expand...
 
Upvote 0 Downvote
Try here


That's a list of valid doctypes.

If you code in HTML then you may use uppercase tags.

If you choose an XHTML doctype then you must use lowercase for all tags and attributes. Attribute values can be whatever case you like. In addition all tags must be closed to accomodate "well formedness". It's XML after all.



Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
HArking back to something I said earlier in this thread, and that Jeff has pointed out.

It may well be easier for you to turn off things selectively rather than turn everything off and then try to turn some things back on.

Follow these steps:
Duplicate your screen stylesheet document

Go through it and put a display:none in all the things you don't want to print

Remove any styling instructions (the actual commands rather than the declaration itself) that are deemed pointless as the element now unseen

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Thanks foamy, much appreciated, can you explain the change from upper to lower case, to me it seems obsurd, but hey i'm just an idiot so what do i know! [hairpull]



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I give Jeff and Dan loads of stars all the time, even on post to other peoples threads that have no relevance to me.

And when I've finally cracked this , they know they'll be getting a warm thank you and some more stars to boot
[peace]



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
it was those two pesky sods, who got me down this route in the first place, i was quite happy with my iframe working and saying "No" to Opera - lol.

But I know i will be richer and better for it in the end

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
759
PeDa
PeDa
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
789
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
624
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
668
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top