External stylesheet order of events for page print

[prsnlty6]

Hi, I have 2 site point CSS books and I am just learning CSS from them (finally had the time!) but they were purchased round about 5 years ago, so some things may have changed since. I've done some research and am now quite confused. It all speaks of working with a current context page to print.

I need help with the lay of the land for an external stylesheet for printing. And... ut hummm(sorry clearing throat), yes, a background will be included and is a must. I know all the why's and what-for's but it is necessary and my users will actually love me for it even if they have to tweek their browsers. (I know this as fact because I polled them and they can't wait) Oh, I didn't say what I do? I write and print personalized letters as a business but I am rebuilding an old site of mine that will be member based for printable letters. Now you see the need for the background. The reason it needs to be an external stylesheet is because it will be linked to a javascript form page that creates/opens the letter in a new page.

A: I am not sure how the link should look.
B: The order of events in the style.css

I will be using these items below:
media print
(page)width px
background image
margin (top and left - possibly right also if I can)
padding
font-type
color
size in px
h1 (on some, I will not always use this)


It has to be position: absolute; Or it will not always print correctly

Any help will be greatly appreciated!
Thank you all for reading

[AlexDawson]

Printing with CSS is very simple, you can either use a separate StyleSheet or in your case it may be more preferable to keep it together, what you need to do is declare the CSS you wish to use for printing by enclose the CSS to be displayed on the screen and print settings by using the correct media type...

@screen {
      body {
            your: screen-CSS-here;
      }
}
@print {
      body {
            your: print-CSS-here;
      }
}

There is no specific order it needs to be in and you code it alike you would normally, it is just seperated by the two media declarations so just override your existing CSS with the stuff you want to be printed, and any stuff you don’t want shown (such as navigation) just use display: none; Hope this helps

[prsnlty6]

Hi Alex, and thank you for replying to my question

I'm having a problem with it, actually it's more me than it.

I can't use my existing CSS because it is something totally separate. Even if I could I'd like to keep it separate for these printed pages as it would be easier later when I have to make adjustments for only the printable works on the site.

How this works:

Java script in the HTML page has a form. There is also the code for the whole letter that writes to the new HTML in the head of this page. This is what also opens the completed letter in a new web page. I place the link to the style sheet in the head of the html part of the javascript code. I cannot put any css code within the writeable portion because the script fails even if I, for example do this:

<div style\=
\ "position\: absolute\; top\: 37px\; left\: 853px\;

I wish I could add the code here for you to see or at least the link (I'm told I can't until I post at least 10 times) I'm not real good at explaining (sorry, I was in a car accident a few years ago and received slight brain damage. I understand but have trouble explaining sometimes what I mean in technical terms) please bare with me.... It would be easier to show you. I think I can add attachments so I can show you so I will try that and you can see what I did wrong.

Thank you

[AlexDawson]

Perhaps you could use that same JavaScript which produces the form (and tells it to print?) to write a CSS file to accompany the document with the media type for print. Remember you can use a separate print StyleSheet with the below.

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

As you can see, the section media="print" tells the document to use this stylesheet for printing. Hope this is helpful.

[prsnlty6]

Do I put this link in the head section of the code for the new page in the JavaScript or in after the body of the new page in the JavaScript?

I don't know about having the JavaScript to write a file to accompany it. A friend wrote this up for me but he passed away a short time before I could begin working with it. When he wrote it neither of us, at the time, thought about how some browsers would not allow it to print the background. We were both used to IE which does just fine with a simple table. Actually so does the newest Beta of Firefox. I'd like it to work in Opera and Safari as well but Background print only works with some builds of Opera (there are bugs in this area on many versions) and Safari just simply won't allow it at all.

I have all of them on my system now. I have to say, I have switched my own default browser to Firefox after all the experimenting I've been doing with this script. It's faster, much less strain on my windows system and my anti spy and anti ad ware apps no longer pop up like crazy. However, it's less HTML forgiving than IE.

Can CSS create a form that creates a new HTML by chance? If so, then it may accomplish what I want to do more efficiently than the JavaScript/CSS. Were you able to look at the attachment that I sent? This does work the way I want it to in essence. The stumbling block is compatibility or lack thereof.

[AlexDawson]

That particular script would be required to go in the head of the document though you should be aware most browsers by default disable printing background images (IE especially I know does this). CSS cannot generate HTML as it is a language built for applying style to HTML rather than structure. The only way you could dynamically add structure to HTML is through either the document.write element of JavaScript or through a serverside language such as PHP. You can use JavaScript to dynamically alter CSS from within a CSS file. Your attachment is still pending approval so I cannot look at it, but for what you seem to be saying, JavaScript would be the best solution to dynamically work with the form and do the generation you need to override both style and if needed, structure.

[prsnlty6]

I apologize for not returning a message sooner. My 18 year old is graduating this year and joining the US Marines. We were busy with the recruiter most of the day and evening.

Yes, I do know that this is true of the browsers disabling "background" images, particularly body background or anything that refers to the image as "background." But does this also include the disabling of, let's say a background image in a box (isn't that what CSS creates instead of a table) if it is simply referred to as an image? And couldn't that image use !important; or wouldn't that make a difference?

What about this; Could one create a box with CSS in an external style sheet, use an image maybe as z-index 1; and the JavaScript layers the text over that image to print along with margins for the text or at least padding? Wouldn't there be a better chance of it printing out then? I am wondering this because when other pages are set up to print they tell the browser to print "none" so if "none" was not given as a directive, wouldn't it print that image or color since it wasn't told not to?

I do want to learn PHP as well, but I think I'll stick to one thing at a time and stay with the JavaScript/CSS.

When I added the code to the head in the JavaScript it didn't work out as expected. That's one reason I sent the HTML and style sheet to you and asked to be sure of it's placement.

Thank you again Alex

Jackie

[AlexDawson]

Yes it would include all background images and no using !important would not make any difference to whether the browser renders it. You could use an image with z-index and this would print, in fact this is how people create scaling backgrounds which "flex" to the resolution. You would not need to use JavaScript to layer text over the image, using position: absolute and z-index would do what you require.

This website implements what you were thinking for the background that prints, just check the source out for the HTML / CSS and see how it works!

http://www.ringvemedia.com/

[prsnlty6]

Thank you Going to look right now.

[prsnlty6]

It's great! Beautiful site too

From what I can tell also is that their style sheet works for the entire site. I am curious, why such high numbers in z-index? I saw 70, 80 and 90. Does it matter what numbers you use as long as it is from smallest to largest like 1, 2, 3, it's still bottom middle and on top right? I ask because I've never seen z-index with such high numbers before.

Also, why does the style sheet reference a table when I thought that not to use tables was one thing that we don't want to use and I also didn't see a table in the HTML? I looked back into my Site Point book "Designing Without Tables" and could not find anything like that referenced there like this.

[AlexDawson]

It does not matter what number you use as long as the z-index is higher for items which appear on top. Tables do have a use in HTML, they are for tabular data rather than layout so if you use them for the right purpose they are perfectly acceptable to use