Why is IE using styles from media=print CSS?

Question

I have the following HTML where there is a DHTML behavior added to the CSS class. When the code is written in the following way, Internet Explorer (version 8 in compatibility mode) reads the @media print as well instead of using the top style only.

<!--[if IE]>
<style>
.roundCorners {
border: 1px solid #b4b4b4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff;
behavior: url(/css/border-radius.htc);
}

@media print {
.roundCorners {
 border: 5px solid #b4b4b4;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background: #fff;
 behavior: url(/css/border-radius_remove.htc);
}
}
</style>
<![endif]-->

Does it apply all the properties or only the border-radius? It might be that the behaviour is always executed, despite being inside a media query — Gerben, Jul 01 '11 at 18:32

score 0 · Answer 1 · answered Aug 06 '11 at 09:13

IE8 is using the print CSS instead of the media one, because the print CSS is inline, and not coming from an external file. This code will help.

<style type="text/css" rel="stylesheet" href="stylesheet_media.css" screen="media">
<style type="text/css" rel="stylesheet" href="stylesheet_print.css" screen="print">

Why is IE using styles from media=print CSS?

1 Answers1