Hello. I'm wondering if anyone has encountered this sort of problem before. We have been using the following code to reference our stylesheets.
<style type="text/css" media="screen">@import "common.css";</style>
<style type="text/css" media="print">@import "print.css";</style>
Everything seemed to be fine until someone reported that there was a problem with the site because the layout seemed to be really off and there were a lot of elements that were missing. This person had been using IE 5.5 (sp2). Naturally the browser was the culprit. So after finally getting my hands on IE 5.5 I tried replicating the problem to figure out what exactly was going wrong. It turned out the stylesheet used for printing was overriding the stylesheet used for the screen. I replaced the style tag for printing with
<link rel="stylesheet" media="print" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"print.css">
And so far that seems to work--looking fine in IE 5.5. Again, my question is whether anyone has encountered this problem before and whether or not replacing the style tag with the link tag is a viable solution. Thanks!Kind of, actually. The problem I had was caused by @import style sheets, but those style sheets were @import'ed from a LINK style sheet.
I used the <link> tag and media="print" to link to a style sheet specific to a page. Then in that style sheet, I @import'ed another print style sheet:
Contents of article.css, imported into HTML document using LINK tag and media="print":
@import "basic.css";
.
.
.
IE5.5 seemed to be OK most of the time. IE 5.01-NT would always render basic.css as a screen style sheet. IE 5.01-9x crashed most of the time. It seems that IE5.x/Win renders all @import style sheets as screen media style sheets, even if the @import'ed style sheet came from another style sheet imported using the <link> tag and media="print." Same as your problem, just a slightly different context. And no, you aren't going crazy.
So it sounds like it's an issue of using the @import in the markup and older browsers (specifically IE) having trouble interpreting it.
Hmmm...Yup. If you want the CSS file ONLY rendered in a certain media, use the <link> tag and absolutely no @imports, except for screen CSS files.Coolio. Thanks.
<style type="text/css" media="screen">@import "common.css";</style>
<style type="text/css" media="print">@import "print.css";</style>
Everything seemed to be fine until someone reported that there was a problem with the site because the layout seemed to be really off and there were a lot of elements that were missing. This person had been using IE 5.5 (sp2). Naturally the browser was the culprit. So after finally getting my hands on IE 5.5 I tried replicating the problem to figure out what exactly was going wrong. It turned out the stylesheet used for printing was overriding the stylesheet used for the screen. I replaced the style tag for printing with
<link rel="stylesheet" media="print" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"print.css">
And so far that seems to work--looking fine in IE 5.5. Again, my question is whether anyone has encountered this problem before and whether or not replacing the style tag with the link tag is a viable solution. Thanks!Kind of, actually. The problem I had was caused by @import style sheets, but those style sheets were @import'ed from a LINK style sheet.
I used the <link> tag and media="print" to link to a style sheet specific to a page. Then in that style sheet, I @import'ed another print style sheet:
Contents of article.css, imported into HTML document using LINK tag and media="print":
@import "basic.css";
.
.
.
IE5.5 seemed to be OK most of the time. IE 5.01-NT would always render basic.css as a screen style sheet. IE 5.01-9x crashed most of the time. It seems that IE5.x/Win renders all @import style sheets as screen media style sheets, even if the @import'ed style sheet came from another style sheet imported using the <link> tag and media="print." Same as your problem, just a slightly different context. And no, you aren't going crazy.
So it sounds like it's an issue of using the @import in the markup and older browsers (specifically IE) having trouble interpreting it.Hmmm...Yup. If you want the CSS file ONLY rendered in a certain media, use the <link> tag and absolutely no @imports, except for screen CSS files.Coolio. Thanks.