Question

This is what I have, which works in IE7, but not in Firefox:

@media screen { @import 'screen.css'; } 

It works outside of the @media block in Firefox:

@import 'screen.css'; 

UPDATE:

This works:

@media screen {       .yui-d3f     {         border: 1px solid #999;         height: 250px;     }  } 

What am I missing?

Answer 1

Firefox is following the CSS2 specification, while IE is playing fast and loose, as it were.

The exact reason is that @import directives must be the first directives after the optional @charset directive. They cannot appear inside of any block. If you want an @import to apply to only one media type, specify that after the imported URI.

Here is the pertinent section of the CSS2 specification: 6.3 The @import rule.