Print Css not loading

Question

Hi

I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.

I have the regular external css for the page inbetween the head tags

And when the user click on the print link . it loads the print css .

<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>


var format = getUrlParam('format');
if (format == 'print') {
    $('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
} 

But,in IE it load the standard css instead of the print.css.

How do can this be fixed for IE6?

Thanks

Answer 1

You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:

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

No need to go through the javascript trickery.

As for IE6 - it does support this, as can be seen on the comparison list on this page.

Answer 2

Try removing the <link> to the other css file when you append the print.css

Answer 3

try with document.write,

document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');