www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to print a specific element

  1. #1
    Join Date
    Jul 2012
    Posts
    1

    How to print a specific element

    I need to print a specific element in the page (an image) without the header, left nav, right nav, footer etc.
    Can anyone provide the CSS and html/JS/php ?

    Thanks

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    The simplest approach is probably to use a separate stylesheet for media="print" and set everything to "display:none" except that portion of the page you want printed. Of course, you can use additional CSS settings for the printed elements as needed. But this is a good way to start.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Posts
    1,651
    rtrethewey's answer is basically correct, but there is a problem you should be aware of: IE7 and IE8 ignore the media="print" statement so will not behave as expected. Despite being obsolete, they still account for 16% of global web usage, so they need to be taken into account.

    This is particularly a problem if you not only want to suppress non-print parts of the page, but also add print-specific elements. There are a variety of solutions, my point is to mention the need to test your chosen solution on IE8, as well as compatible browser(s). That's basic quality testing I know, but I thought it worth mentioning.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles