image when printing

[gavmx]

Hi

I have a logo i need to appear when printing at top of page. The only way I can think of doing it is to have it in the header div as a background image in my print css - however...it doesnt print.

Does anyone have any ideas, solutions.

I attach both style sheets - screen first, then print.

Many thanks

Gavin


html,body{margin:0;padding:0}
body {
text-align:center;
margin-top:2px;
margin-bottom:0px;
background: #E6E6E6;
border-left: 1px solid #999;
border-right: 1px solid #999;
}

img {
border:none;
margin:0px; }
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
text-align:center;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
* html #frame {width:752px;w\idth:750px;}
#header{
width:750px;
margin:0px;
padding:0px;
background: #fff;
text-align: center;
}
#news {
float:left;
width:750px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
text-indent:22px;
color: #666;
padding-top:10px;
padding-bottom:10px;
background: #E6E6E6;
font-weight: bold;
}
* html #news {height:70px;he\ight:50px}
#news p{
margin:0px;
}

#news a:link {
font-family: Arial, Helvetica, sans-serif;
color: #f90;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#news a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#news a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#nav {
float:left;
width:100%;
height:20px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
text-indent:22px;
padding-bottom:10px;
background: #fff;


}

#globe{
float:left;
width:750px;
margin:0px;
height:140px;
padding:0px;
text-align: center;
border-bottom: 1px solid #999;
clear:both
}
* html #globe{height:141px;he\ight:140px;}
#footer{
width:750px;
padding-top:10px;
margin-top:-10px;
text-align: left;
background: #D9D9D9;
font-family: Helvetica, sans-serif;
font-size: 10px;
font-weight:normal;
line-height: 10px;
color: #666;
text-indent:22px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
position:relative;
clear:both;
}
* html #footer {height:45px;he\ight:34px}
#footer p {position:relative}
#nav a:link {
font-family: Arial, Helvetica, sans-serif;
color: #333;
text-decoration: none;
font-weight: normal;
}
#nav a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-decoration: none;
font-weight: normal;
}
#nav a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-decoration: none;
font-weight: normal;
}
#left{
float:left;
width:561px;
margin:0px;
padding:0px;
height: 400px;
background: #fff;
text-align: left;
}
#left img{
border:none;
}
#left_content{
float:right;
width:96%;
height:350px;
text-align: left;
background: #fff;
height: 400px;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
line-height: 14px;
color: #666;
overflow:auto;
visibility: visible;
padding-top:10px;
padding-bottom:10px;
}
#right{
float:left;
width:187px;
margin:0px;
height:400px;
padding:0px;
background: #fff;
text-align: left;
border-left: 1px solid #999;
font-family: Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
line-height: 15px;
color: #666;
}
#right img{
display:block
}
#right p{
float:right;
width:95%;
}
#right h1{
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
line-height: 18px;
color: #666;
}
#right h2{
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
line-height: 15px;
color: #999;

}
#right h3{
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
line-height: 14px;
color: #333;
margin-top:2px;
margin-bottom:2px;




}
#right a:link {
font-family: Arial, Helvetica, sans-serif;
color: #333;
text-decoration: underline;
font-weight: normal;
}
#right a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-decoration: underline;
font-weight: normal;
}
#right a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-decoration: underline;
font-weight: normal;
}

ul#nav, ul#nav ul {
margin: 0;
padding-left:0;
list-style: none;
}

ul#nav li {
position: relative;
float: left;
z-index: 2;
margin:0px;
}

#nav li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top: 100%;
display: none;
width:180px;
}


/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #333;
background: #fff; /* IE6 Bug */
padding: 0px;
height:20px;
margin:0px;
}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {float:left}
* html ul#nav li li a{float:none}
/* end hack */
#nav li ul li{float:none}

/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #777;
}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #fff;

}
#nav li ul li a { padding: 2px 0px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul { display: block; } /* The magic */

[gavmx]

here is print css


html,body{margin:0;padding:0}
body {
text-align:center;
margin-top:2px;
margin-bottom:0px;

}

img {
border:none;
margin:0px; }
#frame {
width:550px;
margin-right:auto;
margin-left:auto;
text-align:center;
}
* html #frame {width:752px;w\idth:750px;}
#header{
background-image: url(resources/intl_ben_print.gif);
background-repeat: no-repeat;
background-position: left top;
}
#header img{
display:none;
}
#news {
float:left;
width:750px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
text-indent:22px;
color: #000;
padding-top:10px;
padding-bottom:10px;
background: #fff;
font-weight: bold;
}
* html #news {height:70px;he\ight:50px}
#news p{
margin:0px;
}

#news a:link {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#news a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#news a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}
#nav {
display:none;


}

#globe{
display:none;
}
* html #globe{display:none;}
#footer{
display:none;
}
* html #footer {display:none;}
#footer p {display:none;}
#nav a:link {
display:none;
}
#nav a:visited {
display:none;
}
#nav a:hover {
display:none;
}
#left{
float:left;
width:561px;
margin:0px;
padding:0px;
background: #fff;
text-align: left;
}
#left img{
border:none;
}
#left_content{
float:none;
width:auto;

height:auto
text-align: left;
background: #fff;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
line-height: 14px;
color: #666;

}
#right{
float:left;
width:187px;
margin:0px;
padding:0px;
background: #fff;
text-align: left;
font-family: Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
line-height: 15px;
color: #000;
}
#right img{
display:block
}
#right p{
float:right;
width:95%;
}
#right h1{
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
line-height: 18px;
color: #000;
}
#right h2{
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
line-height: 15px;
color: #000;

}
#right h3{
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
line-height: 14px;
color: #000;
margin-top:2px;
margin-bottom:2px;
}
#right a:link {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
font-weight: normal;
}
#right a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
font-weight: normal;
}
#right a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
font-weight: normal;
}

ul#nav, ul#nav ul {
display:none;
}

ul#nav li {
display:none;
}

#nav li ul {
display:none;
}


/* Styles for Menu Items */
ul#nav li a {
display:none;
}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {display:none;}
* html ul#nav li li a{display:none;}
/* end hack */
#nav li ul li{display:none;}

/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
display:none;
}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
display:none;
display:none;

}
#nav li ul li a { display:none; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul { display:none; } /* The magic */

[Paul O'B]

Hi,

Are you supplying a width and height for the header so the background image has somewhere to show.

If those two stylesheets are exclsuive to their media then it looks as though you have no dimensions for the image to show.

Also note that a lot of browsers have images and backgrounds turned off by default when printing so there's not much you can do about that.

[gavmx]

ok thanks

i cant think of another way of getting a logo at top of page though without using the header div and having it in background...can you think of any other solutions?

thanks

[Paul O'B]

It doesn't have to be a background image as you can turn foreground images off as well.

off:
#header img {display:none}

on:
#header img {display:block}

[gavmx]

but i have a gif in the header div which i need to change when i go to print. So turning off and on wont work surely as i need to replace an existing image with another one??

thanks

[AutisticCuckoo]

You can have a foreground image for printing, which you hide in your screen style sheet.

Then you have another image as the background image, and hide that in your print style sheet.

That way, the background image is shown on screen, and the foreground image when printing.

[gavmx]

aha

good thinking lol....as ever great help from ppl on this site.

thanks

[gavmx]

I have managed to get the image sorted as detailed above. thanks.

However, it still seems to want to print the nav and the footer - could someone offer any advice.

The page is at http://www.imageworks.co.uk/intl_ben...ntitled-2.html

The 2 css styles are at http://www.imageworks.co.uk/intl_ben_web/intl_ben.css

and intl_ben_print.css

My client is going mad so any help would be great!

Thanks

Gav

[AutisticCuckoo]

You have an error in the <link> element for the print style sheet. Change type="print/css" into type="text/css" and see if it helps.

(Opera 9 does not print the nav or the footer.)

[gavmx]

ok that works but now it doesnt take my hidden (reduced width) gif at the top anymore...grrrr.

[gavmx]

any help please?

many thanks

[Paul O'B]

any help please

Can you explain in more detail what the problem is as I didn't really understand what "but now it doesnt take my hidden (reduced width) gif " was referring to exactly. Are you talking about the print stylesheet or the normal stylesheet. and which element?

You don't seem to have fixed the error that Tommy pointed out either!

[gavmx]

Please view www.imageworks.co.uk/ibnfiles/intl_ben.css and /intl_ben_print.css

The view www.imageworks.co.uk/ibnfiles/about-ibn.pdf (text cut off on r/hand side of page)
www.imageworks.co.uk/ibnfiles/index.pdf (right div width not to full of page)

Any tweaks would be greatly appreciated to solve thses problems. and thanks to all the peoiple who have helped me so far!!!!! i know it must be v tedious!

Thank

Gav

[gavmx]

can anybody please help me out?
Thanks

[simonpointer]

Hi gav
Wow a bit hard to keep up with what's going on here.....lol

I think from what you have said, you have an image on your page a logo which you want to print through your print.css styles?

Assuming that is the case, getting background images to print via your css styles sheet for print is a complete pain and not very consistent across the browsers, beleive me I have tried lots of times. Most browsers strip the bg images out when you go to print, even if you specifiy a display property of some kind.

I recomment you approach it the other way around.

Place your image into your mark up via a regular old <img> tag, and then if necessary hide it from the screen styles. That way it will print pretty well in most browsers. Remember that most borwsers are designed to show pages on screen as a primary purpose and are not really intended to be printing devises.

Of course you may need to place the image into another container like a <div> to make it work - depends on what else you are doing.

I hope that helps.