SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Print style declarations show on screen!

    Hey everyone,
    I am having a minor issue with a site I'm currently working on. I am going for separate style sheets for print and screen and have hit a snag. It seems that whether I use a separate file for print on my stylesheet or include print styles with the @media print {} declaration, the print styles still show up on screen, overriding the screen media styles! I'll show you what I've tried:

    Method 1 - separate styles for print and screen.
    Code:
    <style type="text/css" media="screen">
    @import ('styles-screen.css');
    </style>
    <style type="text/css" media="print">
    @import ('styles-print.css');
    </style>
    Method 2 - separate @media declarations in the same sheet.
    Code:
    HTML page:
    <style type="text/css" media="all">
    @import ('all-styles.css');
    </style>
    
    My stylesheet:
    @media screen {
      /*my declarations here*/
    }
    
    @media print {
      /*settings for print, which end up overriding other
      declarations on screen!*/
    }
    Does anybody know how to fix this problem so print styles only go on printed pages, or are browsers just not there yet? I can't seem to get this to work with the methods I tried above; has anybody gotten this to work?
    Last edited by vgarcia; Feb 17, 2003 at 12:37.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This may sound a bit obvious but isn't it media="print"?

    e.g.

    Code:
    <style type="text/css" media="screen">
    @import ('styles-screen.css');
    </style>
    <style type="text/css" media="print">
    @import ('styles-print.css');
    </style>
    This seems to work ok on compliant browsers.

    Paul
    Last edited by Paul O'B; Feb 17, 2003 at 11:36.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by Paul O'B
    Hi,

    This may sound a bit obvious but isn't it media="print"?

    e.g.

    Code:
    <style type="text/css" media="screen">
    @import ('styles-screen.css');
    </style>
    <style type="text/css" media="print">
    @import ('styles-print.css');
    </style>
    This seems to work ok on compliant browsers.

    Paul
    Yeah, actually I meant media="print"; This example is not a direct copy/paste. I will make the fix on my previous post.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you'll have to do it like this.

    Code:
    <style type="text/css" media="screen">@import "layout.css";</style>
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    Otherwise the print styles just seem to be added to the normal styles. Not sure why.

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi again,

    I've just tried this way and it works ok on IE6.

    Code:
    <style type="text/css" media="all">
    @import url("allcss.css");
    </style>
    
    
    And in the stylesheet.......
    
    @media print {
    body { font-size: 10pt }
    }
    @media screen {
    body { 	font-size: 36px;
    background-color: #0099FF;}	
    }
    @media screen, print {
    body { color: #000000}
    }
    Hope this helps.

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Sorry me again,

    I just realised why your first one wasn't working:

    You missed the url out.

    i.e.

    This works:
    @import url('main.css');

    whereas this doesn't work:
    @import ('main.css');

    but funnily enough this does:
    @import 'main.css';


    Well it worked for me anyway!

    Paul

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Cool, I'll try them all out when I get home tonight (it's for my personal site) and see if I can get somewhere. Again, thanks for your help!


Bookmarks

Posting Permissions

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