SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Milwaukee, WI
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Web Page using wrong .css file

    Hi all!

    I've got a page that's using 2 style sheets - one for screen & one for print. Problem is, for some wierd reason the site is using the print style sheet for the screen. Here's the code that calls both style sheets:

    <LINK REL="StyleSheet" HREF="../style.css" TYPE="text/css" MEDIA="screen">
    <style type="text/css" media="print">@import "../print.css";</style>

    When I pull the html page up, it's using the print.css sheet instead of style.css.

    Any ideas why this might be happening? Am I using the @import incorrectly? I was using @import so Netscape 4 would ignore it.

    Thanks in advance!

    Ruth

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you post a link to your page, or the entire code ? also, in which browsers are you having problems with these stylesheets ?
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using
    Code:
    <link rel="stylesheet" type="text/css" href="../style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="../print.css" media="print">
    You can also use this if you want to use a style sheet that applies to both layouts:
    Code:
    <link rel="stylesheet" type="text/css" href="sheet.css" media="all">
    I'm not 100% on NS - I stopped coding for non-compliant browsers a good while ago!

    http://www.w3.org/TR/REC-CSS2/media.html might help you if you have anymore problems.

    ZOO
    Rick

  4. #4
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Milwaukee, WI
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zoo
    try using
    Code:
    <link rel="stylesheet" type="text/css" href="../style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="../print.css" media="print">
    You can also use this if you want to use a style sheet that applies to both layouts:
    Code:
    <link rel="stylesheet" type="text/css" href="sheet.css" media="all">
    ZOO
    Thanks for the fast replies!

    The problem occured on IE 5.5 sp2, Windows 98.

    I had used your suggestion, Zoo, the first time I tried this. I also had a black & white version of the logo that wasn't displayed, except for the print version. NN 4.x would show both versions of the logo anyway.

    Personally, I'd love to forget about NN 4.x, but the site is for a non-profit, so their stats show NN 4.x as the largest # of Netscape users. Granted, that # isn't that high anyway, but I wouldn't want to shut anyone out.

    Here's the address of the page in question - http://204.95.170.116/bgc/whatwedo/index.html

    If you get a blue bar at the top of the page, it's rendering correctly. If you get a lovely repeating black & white logo background, it's rendering really INcorrectly.

    Thanks again,

    Ruth

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right...i see what you mean. one method i usually use for my print style is using a single stylesheet, but, at the end of it, having
    Code:
    /* your normal page styles */
    
    @media print {
    /* your print styles */
    }
    and not specifying media in the link rel part.
    give it a try, it may prove more cross-browser consistent.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks fine in both IE and Mozilla, although the JS links bar doesn't work in mozilla, just shows a lilac bar.

    Try using it in this form then:
    Code:
    <style type="text/css">
      @import url("../print.css") print;
      @import url("../style.css") screen;
    </style>
    You could also add @import url("sheet_name.css") all; if you need it.

    I'd test it but I don't have NS installed.

    ZOO

    Edit: seen as redux beat me too it, you might want to try his method. I choose to take the easy way out of problems like this and write compliant code (if users can't be bothered to update their browsers it's not my problem ), so I haven't experimented with cross-browser compatibility.
    Rick

  7. #7
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Milwaukee, WI
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, all! I'm off to give your suggestions a try.

    Ruth

  8. #8
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zoo
    Code:
    <style type="text/css">
      @import url("../print.css") print;
      @import url("../style.css") screen;
    </style>
    That's also a convenient way of hiding styles from IE, if memory serves. ;-)

    I think redux has the "better" solution for this situation even though (again from memory) NS4 can't handle @media. Plus, it cuts down on the number of style sheets you have to load and keep track of. It also allows you to easily have a base style and have media-dependent styles inherit from that. :-)

    ~~Ian

  9. #9
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Glass
    That's also a convenient way of hiding styles from IE, if memory serves. ;-)

    I think redux has the "better" solution for this situation even though (again from memory) NS4 can't handle @media. Plus, it cuts down on the number of style sheets you have to load and keep track of. It also allows you to easily have a base style and have media-dependent styles inherit from that. :-)

    ~~Ian
    1) Didn't know that - I'll have to look into it!

    2) Probably true, I tend only to use 2 sheets. A very simple print one and a much more complex display sheet. As the display sheet is the only one to change on a regular basis it makes sense for me to have 2 style-sheets, however I guess its worth playing around to see what works best for your own site.

    hmm, perhaps I should just stick to back-end things, I'm not much cop at this design rubbish
    Rick

  10. #10
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zoo
    hmm, perhaps I should just stick to back-end things, I'm not much cop at this design rubbish
    Pah! I quoted better for a reason, y' know. ;-)

    If you're going to make a bunch of alternative styles available on your site, but you want to create a consistent look 'n' feel across 'em, a few li'le @imports might make it easer to share code across the different styles (using the "cascade" to overwrite the sections you need to)--module like & all that. I'd still use @media for most media-dependent styles where needs be, though--partly 'cause o' IE, and partly just preference. :-)

    ~~Ian


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
  •