Results 1 to 5 of 5

Thread: CSS - media="print"

  1. Sep 23rd, 2004, 05:44 AM #1
    Acidic
    Acidic is offline

    Thread Starter
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090

    Resolved CSS - media="print"

    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?
    Last edited by Acidic; Sep 23rd, 2004 at 06:57 AM.
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  2. Sep 23rd, 2004, 06:36 AM #2
    CornedBee
    CornedBee is offline
    Kitten CornedBee's Avatar
    Join Date
    Aug 2001
    Location
    In a microchip!
    Posts
    11,594
    The problem with display is that child elements of hidden elements can't be re-shown.

    So, you would have to put all text into their own elements.
    Code:
    <p class="noprint">This is some descriptive text that should not show up in printing.</p>
<p><img src="theimage" alt="An Image"/></p>
    Code:
    .noprint {
  display: none;
}
    All the buzzt
    CornedBee

    "Writing specifications is like writing a novel. Writing code is like writing poetry."
    - Anonymous, published by Raymond Chen

    Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.
    Reply With Quote Reply With Quote
  3. Sep 23rd, 2004, 06:41 AM #3
    Acidic
    Acidic is offline

    Thread Starter
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    is it not possible to use some sort of negation? eg, hide all elements except ones with id="map"
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  4. Sep 23rd, 2004, 06:53 AM #4
    CornedBee
    CornedBee is offline
    Kitten CornedBee's Avatar
    Join Date
    Aug 2001
    Location
    In a microchip!
    Posts
    11,594
    Not in IE.
    All the buzzt
    CornedBee

    "Writing specifications is like writing a novel. Writing code is like writing poetry."
    - Anonymous, published by Raymond Chen

    Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.
    Reply With Quote Reply With Quote
  6. Sep 23rd, 2004, 06:57 AM #5
    Acidic
    Acidic is offline

    Thread Starter
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    ok. thanks. I guess this is as resolved as it'll ever be.
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules


Click Here to Expand Forum to Full Width