CSS - media="print"

**Acidic** · Sep 23rd, 2004, 05:44 AM

ok. I need to have a page with text and an image on it. I then need to that when the page is printed, only the image is printed. I could use popups and nasty JavaScript, but I learned about media="print" not long ago and thought it would be ideal for the purpose.

I've almost managed the code myself, here's what I have:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Print image only</title>
<style type="text/css" media="print">
body * {
   visibility: hidden;
}

#map {
   visibility: visible;
}
</style>
<style type="text/css" media="screen">
/*
Normal CSS here
*/
</style>
</head>
<body>
<p>
   This is a long paragraph of text. This shows perfectly well on the page, but when you print this then it'll be hidden.<br />
   This is more text which will also be hidden.<br />
   <img src="map.jpg" alt="Map" id="map" /><br />
</p>
</body>
</html>

Now. I know that I should be using display, not visiblity. But I can't get it working when I do. I suppose my question is; how do I get this working with display instead of visiblity?

Thread: CSS - media="print"

Thread Tools

Display

Threaded View

CSS - media="print"

Posting Permissions