Question

I have this rule which says “use this CSS rule ONLY FOR PRINTING.

@media print {
    .yui-dt-bd {
        width: 920px !important;
        height: 100% !important;
        page-break-before: avoid !important;
        overflow: visible !important;
        position: static !important;
    }
}

The link-to-CSS-file with media-specification shows the same result, by the way:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

However, what do I see when I debug my page with the IE8 dev. tool (F12)? It applies those rules to the page (media=screen)!

I looked long and hard but found nothing on the web, only the “IE ignores this or that”, which is the opposite of MY problem.

IE dev. tool window says: “Browser Mode: IE7, Document Mode: IE7 Standards”. I don’t use any @import statement anywhere (this was an issue in some other IE CSS questions I found so I mention it). All 5 rules (above) are applied (on the screen media).

EDIT: Updated and follow-up question merged into this one.

EDIT: This is not a CSS3 media query, which is of course not supported by IE8 and below. This is media dependent CSS. I did not find anything conclusive, but it seems that THIS SHOULD work, as long as I don’t use CSS3 media query features, which seem not to include THIS example.

Answer 1

IE8 and below do not support media queries, so your issue might be related to an unclosed tag or conditional comment somewhere in your css or page. Run a CSS linter or validate your css to see if you catch any tags that might need closing.