www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] media=print / media=screen

  1. #1
    Join Date
    May 2003
    Location
    UK
    Posts
    220

    resolved [RESOLVED] media=print / media=screen

    Hiya,

    I have both print and screen options for CSS. The print CSS file sets some aspects to hidden so they don't get printed (header/footer, menu etc).

    As part of this I have an expandable/collapsable search box (using javascript). Now when the page loads the default state for the search box is hidden (this is outside of javascript) and sure enough it doesn't appear on print preview or the actual print.

    However when I toggle the search box to become visible, the print CSS file seems to get ignored as it always prints out. I have to manually hide it again for it not to show on the print out.

    Is this by design (i.e. current state overwrites print CSS file), a bug in CSS/JS or something i'm doing wrong?

    Thanks

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Inline styles always take precedence over styles in an external CSS file - unless they are marked !important in the external file. You're using JS, no doubt to toggle the search box to display: block or visibility: visible; so in your print.css add the corresponding counter-acting rule with an !important next to it:

    Code:
    #search { display: none !important; visibility: hidden !important; }
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    May 2003
    Location
    UK
    Posts
    220
    Lovely job.

    Thanks

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