I’m not sure wether the “hidden” images does or does not load when the display is set to none. If it does download it is an unaxceptable technique for me. We have been talking about saving 10kb by using css instead of tables for the layout. Hurray. And now we are going to put in 5mb 300dpi images? I guess I’m not.
And offering all graphics is two resolutions will be a lot of extra work.
I guess the user is used to the result of printed web pages. Maybe not all users will inderstand the difference but in my opinion it’s a different medium with different technical specifications. If you have high res pictures to offer (press or download center) it’s fair to use them. But people will know the difference.
The presented technique might be usefull though to print a header or footer above every content page you print. To “brand” the output from your site. But then you would not need all this fuss. It can be done simpler.
So the idea is nice, offering the user a high res print, but to me it seems a litle too far fetched at the moment.
The article states “The first circle looks a little nicer than the other two due to anti-aliasing. The other two images are anti-aliased, but because of the browser’s rather brutal pixel-culling when scaling, they look jagged”. The 3 circles look exactly the same to me on Opera 8.02/XP.
Lastly, when going to Print Preview in Opera 8, the sample images at the bottom do not show. I just see boxes with the ALT text in them. I can confirm that printing the page doesn’t show any images either. So the technique fails in Opera 8.
Wait – I had “Print page background” turned off. But then it only shows the top image (the Book Whitman logo). And it is low-res. The Manuscript example remains blank.
One approach I’ve used in the past for site logos has sprung from image replacement. Create both print and screen quality logos, using the print version in your markup.
In the screen CSS size your logo as needed, but rather than displaying that to the user give the logo container dimensions and overflow:hidden. Then knock the logo out of the visible area. We now have an essentially blank area where the logo should be, but the logo itself remains in the semantic flow of the document. Now we can apply the screen logo as a background to our logo container.
For the print CSS we simply allow the print logo to show again and switch off the background image to make sure it doesn’t display in those cases where backgrounds are switched on.
This technique gets round the semantic problem of including both resolutions of image in the markup as well as background display on print. It also has the added advantage of allowing us to switch the screen logo in situations where greater contrast is required between itself and its background. For example if background colours change between site sections we can ensure our logo is still sufficiently visible.
This is perhaps only really suitable for logos and other predictable site elements rather than content images and the like. I’m even happy with knocking the actual logo out of the visible area, but would be interested to know if anyone has any strong objections to that particular aspect.
I have the problem that the downsizing width=“1” and height=“1” for the print-image is completely ignored by Firefox (1.0.6 on WinXP) if I turn off styles. Instead the print-image is shown in it’s full size. This happens as well if I look at this article (the “Book Whitman” logo) with styles turned off, as also if I do this with my website, where I tried this.
Anyone with the same problem?
Copy & paste the code below to embed this comment.
Keith Tait
Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?
I tried doing it this way but the hi-res image is still downloaded with the page. It also had the side effect of not actually printing either the low-res or hi-res images.
I’m using Mac Firefox 1.0.4
Ideally what is needed is a solution where the hi-res replacement image is not downloaded until it has to be printed.
So far, a separate print-friendly version of the page seems the best answer.
Glad my little comment brought some responses. Yes, Jason, some people are into deception. So why make it easier for them?
Anyway, other contributors have given many good technical reasons why this idea is silly. Mainly that it does not seem to be very cross-browser, IMO that is because implementation of print style sheets is fairly abysmal at the moment, and, of course, the bandwidth issue.
Some have said that it’s OK with browsers that do not download images set to display:none.
This behaviour is wrong. It is the browsers duty to replace all replaced content in the mark-up and then decide what to do with it according to style rules and image attributes. Otherwise you think that the page has downloaded when it hasn’t and for dial-up users, still the majority I think, and others who like to work off-line, that is very annoying. Until recently Safari was an offender but now it behaves correctly.
Base Point: The purpose of the internet and the web is the dissemination and interchange of information and stuff that gets in the way, eg pretty pictures, should be kept to a minimum. (Unless the purpose of your site is to let people steal your wonderful graphics, of course ;)
You do realize that “information” is not limited to just text, right? So called “pretty pictures” also fall into the category of information. You sound very bitter towards designers, have you been hurt before? Come on Mike, let the hate out and let the love in :D
Willem Jeffery: Yup, I do use display:none in the screen CSS, the 1×1 pixel is in the HTML to try and hide the image when CSS is turned off.
Chris Hester and Helmar Rudolph: Thanks for your feedback on Opera 8. This shows that Opera 8 does actually nicely resample images on screen when scaling them down, so the 3 dots in Exhibit B look identical. Which means that in some cases you needn’t bother with the screen res version at all. I’ll look into my FARK based Book Whitman header and see how I can resolve that to render correctly in Opera.
Will Howat: That is a great idea – it means only one logo in the markup, and removes any issue with background images and printing. I take it you “knock-out” the img by placing it in a padded DIV like the FARK method?
Keith Tait: Just to re-iterate you can’t use the high-res as a background image because you can’t scale a background image’s size CSS. Likewise browsers will download all files in the markup straight away, so this approach is not a good idea to replace all the images on a page unless they are very small. This approach is best used when wanting to replace selected images with hi-res versions. I’d say that with caching and re-using images, the download size might actually be smaller than having the user download new pages every time they want to print.
Mike Stone: I can’t seem to find any contributions which give any “good technical reasons why this is idea is silly”. Many contributors issues have been due to misunderstandings in the approach. It works on all browsers, Opera 8 is not behaving with the IR example I’ve used, but this is likely an issue with my IR implementation, as opposed to the high-res image work (which afterall is just an IMG). This is precisely why sites like ALA exist. For new ideas to be floated and for other users to provide helpful feedback on their experiences to help with refinement. Print CSSdoes have some way to go, and we can help develop it through the very ideas we are discussing here. I do recognize and agree with your issue about people using this approach in a sensible way – as noted in my earlier post it’s best suited to specific images, and hi-res photos on demand.
We used the same method as Will Howat on a recent project. It’s great for logos and other repeating page elements, and gets the double whammy of a) only putting the image in the html once and b) avoiding background-images-off-when-printing embarrassments.
To knock-out the image we used negative positioning rather than display: none; on the <img> in the screen stylesheet to shove it out of view while still keeping the alt attribue available to screen readers (e.g. position:relative; left:-500px).
I’m sure the technique could be adapted for content images fairly simply – either by adding styles to the <head> area to control images on a specific page, or by some scripting jiggery-pokery to right the relevant dimensions and background image url for each image.
Copy & paste the code below to embed this comment.
Manzell Blakeley
Question – can you rescale a background image with css? if so, it could be sensible to select an <img> background image based on the src attribute (or something else) and apply the appropriate rez image, one rule in each the print and screen stylesheet (you did set a media type, right?)
I was thinking, why use this method at all, since it’s still downloading both hi and low res images? Why not just use a higher quality/res (10-12 image quality at 100-150dpi same size width/height in ps) image in your screen/print stylesheet? You’ll save on bytes and it’s just one image now, no need to hide the hi res image. Am i right?
Cheers for coming up with this discussion and article though.
…to send a page to the priner, and at the same time provide the user with a preview of what’s actually going to be printed – which can be adopted to substitute a higher resolution image as well. I am, however, using JavaScript to reconfigure page for printing, this way the big (and it is big) image is ignored, unless the user decides to print the page…
“sample page”:http://www.gerasimenko.com/design/printimage/
I have noticed problem with this method in Firefox. If I use big downscaled image sometimes it looks broken on print. Have no idea why… but this is may be first time, when Explorer did his job better then Firefox.
Copy & paste the code below to embed this comment.
Chris Eilers
Using a single high-resolution image and resampling it for screen rendition seems to be a viable option for some images, such as photos, but can generate an unacceptably poor result for other images, especially line art (unless the image is viewed in Opera 8, which has an excellent resampling engine). I don’t understand the comments which refer to resampling not taking place in the browser. Perhaps this has something to do with the operating system as well as the browser brand and version number? (I’m testing on WinXP and Win98.)
To avoid seeing two images in unstyled html, another technique is to overlay a background image for screen on top of a foreground image for print, by means of a single transparent pixel:
…in the html, along with…
#image-for-screen {width:100px;height:100px;background:#f6eabb url(i/image-for-screen.gif) no-repeat}
…in the screen css.
Sometimes it’s better to get the print image off the screen altogether. Unfortunately, print images are not reliably uploaded by Opera 8 (or Opera 7.5, or both — I can’t remember) if display:none is set on the print image in the screen css. Or at least, they’re not reliably uploaded under some circumstances. To avoid this problem, and to avoid the gap that can result from position:relative (if one wants to avoid the gap), I’ve been using:
I enjoyed the article, and particularly like the idea described by Will Howat and Sophie Dennis (for situations where it’s suitable). As I haven’t posted on A List Apart before, I’d like to add the I really appreciate the magazine, and love the new layout. I’d welcome more articles on the topic of styling web pages for print, as I consider print rendition to be as important as screen rendition, and — as a neophyte DIY web developer who hasn’t even got a website online yet — I’ve found this area quite challenging.
Copy & paste the code below to embed this comment.
Chris Eilers
Woops. A trap for new players. I notice that Dmitry and I have entered some of the characters in our posts as html entities. Unfortunately, the Comment Preview renders these as characters, whereas the post itself shows them as entities.
This is kind of related, and may come in handy. In case you ever need to create and image, that’s design for a specific print-size, you should set the image resolution to 96 dpi.
For example, if you have a site that generates a shipping label, with the barcode that the post office uses, you’ll need that barcode print out to a very specific size. So go into Photoshop, create your 1” by 1” barcode at 96 dpi, and place in your webpage. Now, whenever someone prints that page, and 1” by 1” image of that barcode will print out, no matter what browser you use.
It took me some time to find that info, so hopefully it helps someone else.
I’ve been using this method to provide better print header images on some pages like “this one”:http://www.alzonline.net/en/reading/driving.php. It got me out of creating PDFs!
The “top print image”:http://www.alzonline.net/images/publication/print_header.png is positioned offscreen and made 1×1 by screen CSS, the print CSS scales it to about a third of its original size so it prints at roughly 96*3=288 dpi. The “logo”:http://www.alzonline.net/images/publication/print_logo.png at the bottom is a bit higher quality. I think the key to keeping file size down is to use small-palette PNGs or GIFs.
I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
Copy & paste the code below to embed this comment.
Sam Ellis
I have found previously that images such as logos (i.e. better suited to GIF files) work much better when printed if they are NOT anti-aliased. You get much better edge quality without any fuzziness.
Copy & paste the code below to embed this comment.
Jo VDR
You can completely hide your the printable high resolution image too so why not use:
<img class=“printHiResImage” height=“0” width=“0” alt=”“>
And in your print stylesheet add this:
I use low-resolution and clickable thumbs for accessing the high-resolution images.
There http://www.phpclasses.org/ are a lot of good gallery-scripts that make it automatically.
I’ve built an app that does quotes, and people really need to be able to print. The images I put up at first look great on the site then as soon as you go to print it is crap…
Using 300 & 150dpi images has fixed all the issues. As this is an application and the same 7 images are used over and over again, I’ve simply added a preload js function. Works great.
Now all I need is to get IE7 to print Transparent PNGs…
Copy & paste the code below to embed this comment.
Carlos Bacco
I suggest you turn off antialiasing to produce B/W print images.
The circles in the example are antialiased, so the printer will use patterns/hatches where the pixels are gray. Using high resolution jagged images improves the sharpness of the borders (barcode readers will thank you too).
56 Reader Comments
Back to the ArticleMartijn van der Heijden
I’m not sure wether the “hidden” images does or does not load when the display is set to none. If it does download it is an unaxceptable technique for me. We have been talking about saving 10kb by using css instead of tables for the layout. Hurray. And now we are going to put in 5mb 300dpi images? I guess I’m not.
And offering all graphics is two resolutions will be a lot of extra work.
I guess the user is used to the result of printed web pages. Maybe not all users will inderstand the difference but in my opinion it’s a different medium with different technical specifications. If you have high res pictures to offer (press or download center) it’s fair to use them. But people will know the difference.
The presented technique might be usefull though to print a header or footer above every content page you print. To “brand” the output from your site. But then you would not need all this fuss. It can be done simpler.
So the idea is nice, offering the user a high res print, but to me it seems a litle too far fetched at the moment.
Chris Hester
The article states “The first circle looks a little nicer than the other two due to anti-aliasing. The other two images are anti-aliased, but because of the browser’s rather brutal pixel-culling when scaling, they look jagged”. The 3 circles look exactly the same to me on Opera 8.02/XP.
Lastly, when going to Print Preview in Opera 8, the sample images at the bottom do not show. I just see boxes with the ALT text in them. I can confirm that printing the page doesn’t show any images either. So the technique fails in Opera 8.
Chris Hester
Wait – I had “Print page background” turned off. But then it only shows the top image (the Book Whitman logo). And it is low-res. The Manuscript example remains blank.
The author’s photo prints fine!
Will Howat
One approach I’ve used in the past for site logos has sprung from image replacement. Create both print and screen quality logos, using the print version in your markup.
In the screen CSS size your logo as needed, but rather than displaying that to the user give the logo container dimensions and overflow:hidden. Then knock the logo out of the visible area. We now have an essentially blank area where the logo should be, but the logo itself remains in the semantic flow of the document. Now we can apply the screen logo as a background to our logo container.
For the print CSS we simply allow the print logo to show again and switch off the background image to make sure it doesn’t display in those cases where backgrounds are switched on.
This technique gets round the semantic problem of including both resolutions of image in the markup as well as background display on print. It also has the added advantage of allowing us to switch the screen logo in situations where greater contrast is required between itself and its background. For example if background colours change between site sections we can ensure our logo is still sufficiently visible.
This is perhaps only really suitable for logos and other predictable site elements rather than content images and the like. I’m even happy with knocking the actual logo out of the visible area, but would be interested to know if anyone has any strong objections to that particular aspect.
Michael van Laar
I have the problem that the downsizing width=“1” and height=“1” for the print-image is completely ignored by Firefox (1.0.6 on WinXP) if I turn off styles. Instead the print-image is shown in it’s full size. This happens as well if I look at this article (the “Book Whitman” logo) with styles turned off, as also if I do this with my website, where I tried this.
Anyone with the same problem?
Willem Jeffery
Opera resamples images. I wasn’t aware of this and thought Safari was the only one.
To see the mentioned effect, try it in Firefox or IE.
Keith Tait
I tried doing it this way but the hi-res image is still downloaded with the page. It also had the side effect of not actually printing either the low-res or hi-res images.
I’m using Mac Firefox 1.0.4
Ideally what is needed is a solution where the hi-res replacement image is not downloaded until it has to be printed.
So far, a separate print-friendly version of the page seems the best answer.
Mike Stone
Glad my little comment brought some responses. Yes, Jason, some people are into deception. So why make it easier for them?
Anyway, other contributors have given many good technical reasons why this idea is silly. Mainly that it does not seem to be very cross-browser, IMO that is because implementation of print style sheets is fairly abysmal at the moment, and, of course, the bandwidth issue.
Some have said that it’s OK with browsers that do not download images set to display:none.
This behaviour is wrong. It is the browsers duty to replace all replaced content in the mark-up and then decide what to do with it according to style rules and image attributes. Otherwise you think that the page has downloaded when it hasn’t and for dial-up users, still the majority I think, and others who like to work off-line, that is very annoying. Until recently Safari was an offender but now it behaves correctly.
Base Point: The purpose of the internet and the web is the dissemination and interchange of information and stuff that gets in the way, eg pretty pictures, should be kept to a minimum. (Unless the purpose of your site is to let people steal your wonderful graphics, of course ;)
Meryl K. Evans
You do realize that “information” is not limited to just text, right? So called “pretty pictures” also fall into the category of information. You sound very bitter towards designers, have you been hurt before? Come on Mike, let the hate out and let the love in :D
Ross Howard
Just a couple of updates
Willem Jeffery: Yup, I do use display:none in the screen CSS, the 1×1 pixel is in the HTML to try and hide the image when CSS is turned off.
Chris Hester and Helmar Rudolph: Thanks for your feedback on Opera 8. This shows that Opera 8 does actually nicely resample images on screen when scaling them down, so the 3 dots in Exhibit B look identical. Which means that in some cases you needn’t bother with the screen res version at all. I’ll look into my FARK based Book Whitman header and see how I can resolve that to render correctly in Opera.
Will Howat: That is a great idea – it means only one logo in the markup, and removes any issue with background images and printing. I take it you “knock-out” the img by placing it in a padded DIV like the FARK method?
Keith Tait: Just to re-iterate you can’t use the high-res as a background image because you can’t scale a background image’s size CSS. Likewise browsers will download all files in the markup straight away, so this approach is not a good idea to replace all the images on a page unless they are very small. This approach is best used when wanting to replace selected images with hi-res versions. I’d say that with caching and re-using images, the download size might actually be smaller than having the user download new pages every time they want to print.
Mike Stone: I can’t seem to find any contributions which give any “good technical reasons why this is idea is silly”. Many contributors issues have been due to misunderstandings in the approach. It works on all browsers, Opera 8 is not behaving with the IR example I’ve used, but this is likely an issue with my IR implementation, as opposed to the high-res image work (which afterall is just an IMG). This is precisely why sites like ALA exist. For new ideas to be floated and for other users to provide helpful feedback on their experiences to help with refinement. Print CSS does have some way to go, and we can help develop it through the very ideas we are discussing here. I do recognize and agree with your issue about people using this approach in a sensible way – as noted in my earlier post it’s best suited to specific images, and hi-res photos on demand.
Sophie Dennis
We used the same method as Will Howat on a recent project. It’s great for logos and other repeating page elements, and gets the double whammy of a) only putting the image in the html once and b) avoiding background-images-off-when-printing embarrassments.
To knock-out the image we used negative positioning rather than display: none; on the <img> in the screen stylesheet to shove it out of view while still keeping the alt attribue available to screen readers (e.g. position:relative; left:-500px).
I’m sure the technique could be adapted for content images fairly simply – either by adding styles to the <head> area to control images on a specific page, or by some scripting jiggery-pokery to right the relevant dimensions and background image url for each image.
Manzell Blakeley
Question – can you rescale a background image with css? if so, it could be sensible to select an <img> background image based on the src attribute (or something else) and apply the appropriate rez image, one rule in each the print and screen stylesheet (you did set a media type, right?)
Khairudin Lee
I was thinking, why use this method at all, since it’s still downloading both hi and low res images? Why not just use a higher quality/res (10-12 image quality at 100-150dpi same size width/height in ps) image in your screen/print stylesheet? You’ll save on bytes and it’s just one image now, no need to hide the hi res image. Am i right?
Cheers for coming up with this discussion and article though.
Ilya Gerasimenko
…to send a page to the priner, and at the same time provide the user with a preview of what’s actually going to be printed – which can be adopted to substitute a higher resolution image as well. I am, however, using JavaScript to reconfigure page for printing, this way the big (and it is big) image is ignored, unless the user decides to print the page…
“sample page”:http://www.gerasimenko.com/design/printimage/
Dmitry Baranovskiy
I have noticed problem with this method in Firefox. If I use big downscaled image sometimes it looks broken on print. Have no idea why… but this is may be first time, when Explorer did his job better then Firefox.
Chris Eilers
Using a single high-resolution image and resampling it for screen rendition seems to be a viable option for some images, such as photos, but can generate an unacceptably poor result for other images, especially line art (unless the image is viewed in Opera 8, which has an excellent resampling engine). I don’t understand the comments which refer to resampling not taking place in the browser. Perhaps this has something to do with the operating system as well as the browser brand and version number? (I’m testing on WinXP and Win98.)
To avoid seeing two images in unstyled html, another technique is to overlay a background image for screen on top of a foreground image for print, by means of a single transparent pixel:
<img id=‘image-for-screen’ src=“i/single-transparent-pixel.gif” alt=”” />
…in the html, along with…
#image-for-screen {width:100px;height:100px;background:#f6eabb url(i/image-for-screen.gif) no-repeat}
…in the screen css.
Sometimes it’s better to get the print image off the screen altogether. Unfortunately, print images are not reliably uploaded by Opera 8 (or Opera 7.5, or both — I can’t remember) if display:none is set on the print image in the screen css. Or at least, they’re not reliably uploaded under some circumstances. To avoid this problem, and to avoid the gap that can result from position:relative (if one wants to avoid the gap), I’ve been using:
.hidden-off-screen {position:absolute;left:-999px;top:-999px;width:1px;height:1px}
…for the print image in the screen css.
I enjoyed the article, and particularly like the idea described by Will Howat and Sophie Dennis (for situations where it’s suitable). As I haven’t posted on A List Apart before, I’d like to add the I really appreciate the magazine, and love the new layout. I’d welcome more articles on the topic of styling web pages for print, as I consider print rendition to be as important as screen rendition, and — as a neophyte DIY web developer who hasn’t even got a website online yet — I’ve found this area quite challenging.
Chris Eilers
Woops. A trap for new players. I notice that Dmitry and I have entered some of the characters in our posts as html entities. Unfortunately, the Comment Preview renders these as characters, whereas the post itself shows them as entities.
My line above:
<img id=‘image-for-screen’ src=”?i/single-transparent-pixel.gif”? alt=”?”? />
should read:
?i/single-transparent-pixel.gif
Tony Nguyen
This is kind of related, and may come in handy. In case you ever need to create and image, that’s design for a specific print-size, you should set the image resolution to 96 dpi.
For example, if you have a site that generates a shipping label, with the barcode that the post office uses, you’ll need that barcode print out to a very specific size. So go into Photoshop, create your 1” by 1” barcode at 96 dpi, and place in your webpage. Now, whenever someone prints that page, and 1” by 1” image of that barcode will print out, no matter what browser you use.
It took me some time to find that info, so hopefully it helps someone else.
Steve Clay
I’ve been using this method to provide better print header images on some pages like “this one”:http://www.alzonline.net/en/reading/driving.php. It got me out of creating PDFs!
The “top print image”:http://www.alzonline.net/images/publication/print_header.png is positioned offscreen and made 1×1 by screen CSS, the print CSS scales it to about a third of its original size so it prints at roughly 96*3=288 dpi. The “logo”:http://www.alzonline.net/images/publication/print_logo.png at the bottom is a bit higher quality. I think the key to keeping file size down is to use small-palette PNGs or GIFs.
Jeena Paradies
I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
Jeena Paradies
I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
Sam Ellis
I have found previously that images such as logos (i.e. better suited to GIF files) work much better when printed if they are NOT anti-aliased. You get much better edge quality without any fuzziness.
Sam Ellis
You only get the better quality when you create the big, and print them small, as per example.
Jo VDR
You can completely hide your the printable high resolution image too so why not use:
<img class=“printHiResImage” height=“0” width=“0” alt=”“>
And in your print stylesheet add this:
img.printHiResImage {width:30px;heigth:30px}
Jo VDR
If need to preload a high resolution (eg 150dpi – 300dpi)
You can always preload the image with CSS.
Print Styles:
/* preload print image */
div#Print {background:transparent url(’../images/printHiResImage.gif’) no-repeat -1000em -1000em;}
/* set width and heigth of print image */
img.printHiResImage {width:30px;heigth:30px}
The HTML:
<div id=“Print”>
<img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
Jo VDR
One thing more is needed though:
Set div#Print {display:none} in the normal stylesheet
And in the print stylesheet (I guess this stylesheet with the media attribute , media=“print”, is only downloaded when printing actually something ??)
div#Print {display:block}
Jo VDR
Images of course have a src too:
<img class=”?printHiResImage” src=“images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”
Jo VDR
To sum it all up:
– preload the high resolution image with CSS, hide print image from view
– show <img> in Print Stylesheet
In your normal Stylesheet:
div#Print {
background:transparent url(’../images/printHiResImage.gif’)
no-repeat -1000em -1000em;
display:none;
}
In your Print Stylesheet:
img.printHiResImage {width:30px;heigth:30px}
div#Print {display:block}
HTML:
<div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
Jo VDR
<div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
should be:
<img class=”?printHiResImage” src=”?images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”
imran hashmi
Hi
Please can any one help me to manage a stick up footer on the website for IE 5.0 +.
As you can see 1 on http://www.bmw.co.uk
thanks
Imran Hashmi
imran hashmi
Hi
Please can any one help me to manage a stick up footer on the website for IE 5.0 +.
As you can see 1 on http://www.bmw.co.uk
thanks
Imran Hashmi
Gustav Andersson
useful
shashi kumar
pls allow me download the image
John Kelling
I use low-resolution and clickable thumbs for accessing the high-resolution images.
There http://www.phpclasses.org/ are a lot of good gallery-scripts that make it automatically.
Nicholas Orr
I so needed this.
I’ve built an app that does quotes, and people really need to be able to print. The images I put up at first look great on the site then as soon as you go to print it is crap…
Using 300 & 150dpi images has fixed all the issues. As this is an application and the same 7 images are used over and over again, I’ve simply added a preload js function. Works great.
Now all I need is to get IE7 to print Transparent PNGs…
Carlos Bacco
I suggest you turn off antialiasing to produce B/W print images.
The circles in the example are antialiased, so the printer will use patterns/hatches where the pixels are gray. Using high resolution jagged images improves the sharpness of the borders (barcode readers will thank you too).
Just test and see.
Cheers.