22 replies [Last post]
mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

I hope someone can help me with this. I have set up a page in CSS (which validates) but now have to attach another external style sheet in order to allow users to 'print this page'. I am trying to attach the following: <link href="css/print.css" rel="stylesheet" type="text/css" media="print" /> but whenever I do this it blacks out my page and when I try to print it, it prints the blank black page. I am using Dreamweaver in Code & Design mode, but whenever I try to add this stylesheet the design area goes blank. I would be very grateful for any suggestions as to what I could be doing wrong or why this could be happening.

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Problem adding stylesheet for printing page

What are the contents of the css file you are linking to? Wondering if there is something in there that is causing this to happen?

I'm having a good day...so far.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

Are we talking about DW here or is this a problem that you see when previewing properly in a browser?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

css file

Thanks for your replies so far. I have posted the css document below in case there's something there causing the problem. I have tried previewing the file in a browser and it is still blank, and have tried printing out the html page and it's blank whenever I add this stylesheet.

/* CSS Document */

body {
text-align:center;
font: 12pt Arial, Helvetica, sans-serif;
border: medium;
border-color:#CCCCCC;
background-color:#000000;

}

#contentcenter {
font: 12pt Arial, Helvetica, sans-serif;
color: #000000;
margin: 10%;

}
#contentcentergallery {
font: 12pt Arial, Helvetica, sans-serif;
color: #000000;
margin: 10%;

}
div#contentright {display: none}
div#contentheader {display: none}
div#contentheader2 {display: none}
div#contentheader h1 {display: none}
div#contentright p {display: none}
div#nav {display: none}
div#frame {display: none}
div#contentleft {display: none}
div#bottom {display: none}

h1 {
font: 14pt Arial, Helvetica, sans-serif;
color: #999999;
}
.main {
font: normal 12pt Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;

}

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Problem adding stylesheet for printing page

Start by losing this line:
background-color:#000000;

It appears that you are printing only the #content div and gallery and it has a background-color and color that are both set to 'black' (#000000), hence, you are seeing a 'black' page.

I'm having a good day...so far.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

That's one of those #-o moments Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Problem adding stylesheet for printing page

And we all have them...

I'm having a good day...so far.

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

Thanks for this. However, I have changed the stylesheet to remove the black background but unfortunately it has made no difference. The screen still blacks out whenever I add the new stylesheet. Surely if it was just the background that was the problem it wouldn't black out until I actually printed it? Sorry if I'm being really thick here. Any other ideas?

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Problem adding stylesheet for printing page

Can you post the code for the html page containing the <link> to the screen htmlpage and the print css file,please.
And have you checked to see if the background-color/color problem exists in the screen css file, also?

I'm having a good day...so far.

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

You can view the html page at http://www.aberdeen-internet.com/sbc/ The css for the main site is posted below. You'll note that the black background is the area above, below, left and right of the page which I can't remove. Thanks very much for looking at this - I'm about to go out but will look back tomorrow.

/* CSS Document */

body {
text-align:center;
font: 75% Arial, Helvetica, sans-serif;
border: medium;
border-color:#CCCCCC;
background-color:#000000;

}

#frame {
width:800px;
padding:0px;
border: medium solid #CCCCCC;
text-align:left;
margin: 5px auto 0px;
}

#contentleft {
width:115px;
padding:7px 0px 0px;
float:left;
background:#000000;
text-decoration: none;
height: 530px;
}
#contentleft2 {
width:125px;
padding:0px;
background:#000000;
text-align:center
}
#contentcenter {
width:537px;
padding:5px 5px 3px 8px;
float:left;
background:#FFFFFF;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
height: 514px;

}

#contentcentergallery {
width:660px;
padding:2px 2px 0px 2px;
float:left;
background:#FFFFFF;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
height: 530px;

}

#contentright {
padding:0px;
background:#b6b6b6;
float: right;
width: 115px;
margin: 0px;
}

#contentheader {
background:#000000;
border-width: 0px;
margin: 0px;
padding: 0px;
}
#contentheader2 {
background:#000000;
border-width: 0px;
line-height: normal;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font: 14px Arial, Helvetica, sans-serif;
color: #999999;
padding: 10px 0px 0px;
}


.main {
font: normal 100% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
}
a.main:link {
color: #000000;
text-decoration: underline;
}a.main:visited {
color: #000000;
text-decoration: underline;
}a.main:hover {
color: #000000;
text-decoration: underline;
}a.main:active {
color: #000000;
text-decoration: underline;
}
.bottom {
font: bold normal 9px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
text-align: center;
clip: rect(auto,auto,auto,10px);
margin-left: 10px;
}
.h1 {
font: bold 14px Arial, Helvetica, sans-serif;
color: #000000;

}
a.bottom:link {
color: #000000;
text-decoration: none;
}
a.bottom:visited {
color: #000000;
text-decoration: none;
}a.bottom:hover {
color: #000000;
text-decoration: underline;
}a.bottom:active {
color: #000000;
text-decoration: underline;
}

.nav {
font: bold normal 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 0px;
}

.gold {
font: bold 12px Arial, Helvetica, sans-serif;
color: #ffcc2a;
margin-left: 0px;
}

.addresswhite {
font: normal 9px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background: center;
}
.addressgrey {
font: normal 10px Arial, Helvetica, sans-serif;
color: #CCCCCC;
text-align: center;
text-decoration: none;
background: center;
}
a.addressgrey:link {
color: #CCCCCC;
text-decoration: underline;
}
a.addressgrey:visited {
color: #CCCCCC;
text-decoration: underline;
}a.addressgrey:hover {
color: #CCCCCC;
text-decoration: underline;
}a.addressgrey:active {
color: #CCCCCC;
text-decoration: underline;
}
a {text-decoration:none;}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

I'm confused here, where are the print styles being talked about, so far you have shown isolated CSS rulesets but looking at your link to the page shows no sign of any print styles or @media rules, am I missing something here?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Problem adding stylesheet for printing page

Wondering if it would be as simple as clearing your cache to eliminate the possibility that you are picking up the old version of the print-css file.

Just visited and printed the page, then realized you have removed the print-css file, so I received a page with all the images and navbar printed which prints fine.
Add the linked print-css back into the page, clear the cache and have another go at it, is my thoughts.

I'm having a good day...so far.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

Sorry but it really is pointless asking for help if the pertinent files and conditions are not there for us to examine!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

Sorry guys. I was rushing last night and didn't realise I hadn't reinstated the print.css file before publishing. Because it blacks out my screen immediately after I add it, and I was trying to do some other work on the site, I removed it. Really appreciate your help with this and wasn't meaning to be awkward.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

Can understand why you would leave it out I guess Smile

I'm still mildly confused, you have two stylesheets the first has no media type therefore applies in general the second print media stylesheet has body background color #00000 still.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

Hi Hugo, no problem still exists. This is the first time I've tried to do this so it could be that I'm missing something really obvious. The page is www.aberdeen-internet.com/sbc so you can view the html there. The print.css file is at http://www.aberdeen-internet.com/sbc/css/print.css and the main css document for the site is at www.aberdeen-internet.com/sbc/css/businessarial.css. When I try to print the page it just prints a black page. Am I still missing someting? Sorry if I'm being thick again! I'm still new to CSS so maybe I'm a bit out of my depth. Don't want to give up on it though so, again, grateful for any advice.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

Sorry I edited my post when I realised you had updated your original link(I should have checked first) my edit may have come after you read it, my problem still is that you have a body background black plus black text, also have you tried turning off print backgrounds in your browser printer configuration settings?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

I turned off body backgrounds in my printer settings. It now prints out a blank white page with just document title at top and page and date at bottom. Regards the black background and black print, I have removed the black background from the print.css file but need it on the main one. The black text is needed for the main text on the white background in the centre of the site. Am I missing something else?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

This is purely off the top of my head, with your display none rules in the print styles are any of them a parent of the required content to be printed?

HUgo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

I'll answer my own question, thought so! Smile

#frame {display:none}

is knocking all it's descendent elements out.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

Thanks so much Hugo. Not sure where that came from to tell you the truth! I also noticed another problem that I have fixed. After checking through the print.css file for the umpteenth time I noticed that I hadn't specified a font colour for the main font style. Having changed both these things I get a result!!! Whew.... I still have a bit of fine tuning to do but thanks so much for your time on this.

mcspiggot
Offline
Regular
Aberdeen
Last seen: 13 years 2 weeks ago
Aberdeen
Joined: 2005-06-06
Posts: 27
Points: 0

Problem adding stylesheet for printing page

I know you thought you'd got shot of me at last, but I have one last query that I hope you might be able to help me with. I deleted frame {display:none} which was causing the problem but I realise now that I can't just delete it as I need it to ensure the grey frame round the text doesn't show. Can you advise how I can do this without causing the problem again and knocking the descendents out again.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem adding stylesheet for printing page

Hang on thought we'd got shot of you Laughing out loud

Erm can you just not rewrite the styles for #frame? rather than set it to display:none which is not an option if it has border rules then in the print style rulesets for it just write border:none;.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me