Print Style Sheet Problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Print Style Sheet Problem (3/22/2005 0:01:50)

Hi everyone,

I would've posted this under this thread only it's kind of a different problem.

I've created a Print style sheet using this site's tutorial and found it very helpful. I'm surprised i've learnt this much in one day, my print style sheet works almost perfectly.

The problem is, i've excluded a left and right column from the print area as well as a banner and footer. In other words, the left column was the navigation and the right column had ads in it so i only wanted the centre column of the site to print.

The trouble is, it's leaving a large white space where the right column was, it's a bit hard to tell whether it's doing that for the left column as it was rather narrow anyway. Any ideas on how to fix this?

I have an incling that it may be because the entire page was contained within a table with a very thin grey border, which i've left to be printed with the other content because i felt it looked good printed that way.

Also, when i print the page or view it using "print preview" in IE it has no reference to where the page was printed from, unlike in Firefox where it tells you the web address and the site name as a kind of header.

thanks in advance

Nicole



Nicole -> RE: Print Style Sheet Problem (3/22/2005 3:38:47)

Isn't it funny how you sit at your computer all afternoon and get so close to achieving something but just can't quite nut it out?

You go and cook dinner and watch television for a bit and return to your computer and just solve the problem in a minute?

Nicole



caz -> RE: Print Style Sheet Problem (3/23/2005 7:22:00)

Just to add an alternative way of creating printer friendly pages; instead of adding a separate style sheet for printing, as is shown in the link you gave, I added a few lines to the main stylesheet like this:- 

/*Printer friendly styles*/



@media print {

#wrapper {

text-align: left;

border: none;}



#main-title {

display: none;}

#left {

display: none;}

#right {

display: none;}

#footer {

display: none;}

#footer div {

display: none;}


This is handy if you only have simple adjustments to make.

Is Autumn in the air in Oz yet?
Cheers,
Carol



Nicole -> RE: Print Style Sheet Problem (3/24/2005 15:50:13)

Hi Caz,

Thanks for that, i'll probably keep that in mind from the start of another site, but for the moment i think i'm in too far with this site to go adding div's and taking out all my classes. Maybe i'm not and i'll have to try your method, i'm not sure.

The problem i just can't seem to fix though (I've fixed the problem with the space appearing after removing sections like "right" etc.), is that i have the whole page contained within a table with a thin border, then i have my site set up with tables within it. I've successfully removed all unwanted content from the internal tables on the print style sheet, but i can't seem to tell it not to print the border for the containing table.

The inline style of the table is:
<table class="container" style="border: 1px solid #cccccc" cellpadding="10" cellspacing="0" width="100%" bgcolor="#333333">

and i've added the class "container" as you can see so i can style it for appearence using the CSS and printing using the other style sheet. The code i've just shown you is obviously overruling the linked style sheets, but when i remove the border properties from the inline styles and leave that property up to the style sheets to style, the border doesn't show at all when even viewing the page.

The CSS for the class "container" is:

table.container {border: 1px solid: #cccccc;}

and in the print style sheet is:

table.container {border: 1px solid #ffffff;}

I've styled it white so it won't print but it still does?

I'd appreciate any suggestions as to what i can do from anyone who might know.

Nicole

p.s. yes it's starting to cool down in Sydney, had a lovely day of rain the other day, you've no idea how we worship rain in Sydney these days.



d a v e -> RE: Print Style Sheet Problem (3/24/2005 16:15:27)

have you tried setting the border to 0 instead for the print style sheet?
so
table.container {border: 0;}
or even
{border: hidden;} ?



Nicole -> RE: Print Style Sheet Problem (3/24/2005 17:46:37)

Hi Dave,

I've tried that, but once i delete the code out of the main page so it doesn't overrule it, the table border doesn't show at all?

Nicole



caz -> RE: Print Style Sheet Problem (3/24/2005 18:37:49)

In the print stlylesheet then, as I did with my wrapper div above so as to not print the border,

table.container {border: none;}

Have you tried that?



Nicole -> RE: Print Style Sheet Problem (3/24/2005 18:43:26)

Thanks Caz,

It seems that it's not even looking at the CSS info, the problem seems to be with the inline code - when i take out the styles that i intend to style with style sheets, it just loses the border totally.

Sorry i can't show a sample at the moment.

Nicole



d a v e -> RE: Print Style Sheet Problem (3/25/2005 4:18:48)

just to clarify - if you remove the inline style from the table and then move the 1px border into the screen stylesheet 
table.container {border: 1px solid: #cccccc;}


and then try say 
table.container {border: 1px solid: #red;}

in the print stylesheet does that work? (i suggest using red to see if you can see the change in print preview then you can worry about removing it)

otherwise a url or code might be in order ;)



Nicole -> RE: Print Style Sheet Problem (3/25/2005 5:25:40)

Hi Dave,

Here's the URL

Its the thin border #cccccc that i can't seem to get rid of.

Nicole



d a v e -> RE: Print Style Sheet Problem (3/25/2005 6:25:26)

ok in the html where you have 
<table class="container" style="border: 1px solid rgb(204, 204, 204);" bgcolor="#333333" cellpadding="10" cellspacing="0" width="100%">


take out 
style="border: 1px solid rgb(204, 204, 204);"

so you have this 
 <table class="container"  bgcolor="#333333" cellpadding="10" cellspacing="0" width="100%">


then in your screen style sheet you had a spare colon 
table.container {
	border: 1px solid : #cccccc;
}


change it to 
table.container {
	border: 1px solid #cccccc;
}



then in print stylesheet just use 
table.container {
		border: hidden;
}


i've checked it in IE6, firefox 1.02 and opera 7.6 and all work fine


btw you you have quite a few small errors in in the stylesheets e.g. 'verticle-align' is 'vertical-align: top;' etc
http://tinyurl.com/5plrp (edited for tiny url)

not sure what css editor you are using but topstyle lite (http://www.bradsoft.com/download/index.asp) is great (did i remember rightly that you're using stylemaster or was that someone else?? anyway topstyle lite highlights invalid syntax)

btw if you use opera at all the 'p' key quickly toggles between the 'screen' page and print preview so it's a quick way of checking stuff, though you'll still need to confirm the appearance in IE/FF/...

there's also an additional couple of articles on alistapart for print stylesheets that i used when i did mine
http://www.alistapart.com/articles/goingtoprint/
http://www.alistapart.com/articles/printyourway/

:)


p.s. nice site btw - nicely balanced and er, nice colours



caz -> RE: Print Style Sheet Problem (3/25/2005 7:20:11)

Dave beat me to it and very comprensively too[:D]

I'd just add that Stylemaster picked up the typos too and that I still hate tables, in fact I have almost forgotten how to use them ( except for tabular data of course ).

I agree that the site is looking good too.

Cheers
Carol



Nicole -> RE: Print Style Sheet Problem (3/25/2005 15:33:36)

Thank you so much Dave and Caz!

I can't believe i had an extra : !!!

The other day i became so frustrated at a missing }

I'm writing the CSS myself now actually. I did use the trial version of Stylemaster, but i didn't think it was very professional that you have to go into windows explorer and delete a file it creates every time you want to start it up, so i didn't end up buying it. I'll have a look at the program you mention Dave.

And thanks for the compliments on the site. Of course all these thanks are in advance as it's 7.30am here and i haven't yet fixed these errors to see if it makes all the difference. They may also be the reason the site looked so crazy in Netscape 4.

Thanks again

Nicole



caz -> RE: Print Style Sheet Problem (3/25/2005 17:45:23)

quote:

I did use the trial version of Stylemaster, but i didn't think it was very professional that you have to go into windows explorer and delete a file it creates every time you want to start it up,


[8|]

I didn't find that issue at all and now there is version 4, released a week or so ago which you may find more useful - especially for correcting hand coding as you go. I think that it is excellent Aussie software, although it does favour a Dreamweaver/Go Live tie in.


PS. Most sites look crazy in Netscape 4 if they are using stylesheets, the poor thing has a nervous breakdown when it sees them. Best to serve a very simple sheet to it like this example:

/* simple.css for nn4 */
body {
background:white;
color: #000000;
text-align:justify;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 86%;}

In the html
<head>
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="main.css" media="all" />
</head>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375