Question

I have a css stylesheet linked to my webpage. When I view the webpage it look how it is supposed to look, but when I print the document I don’t see the style anymore. I’ve added the css a second time with the attribute: media='print' but it won’t work. Does anybody know how to use the window.print() function and keeping the style to the printing document?

ASPX:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="cpHead" ClientIDMode="AutoID">
<link rel="stylesheet" type="text/css" media="screen" href="Styles/Site.css" />
<link rel="stylesheet" type="text/css" media="print" href="Styles/Site.css" />
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="Main" ClientIDMode="AutoID">
    <asp:Image ID="imgHeader" Width="100%" runat="server" />
    <asp:GridView ID="gvPrintData" Width="100%" runat="server" HeaderStyle-CssClass="printGridHeader" RowStyle-CssClass="printGridRow" AlternatingRowStyle-CssClass="printGridAltRow" />
</asp:Content>

.CS:

Response.Write("<script type='text/javascript'>window.print(); window.onfocus = function() { window.close(); }</script>");

Pageview (how it should look):

Printedview (how it looks on the printed document):

Answer 1

Your stylesheet is actually working – look at the heading font. What I suspect is happening is the browser is not printing background colours.

Go to the Page Setup / Print setup in your browser and check that background images and colours is turned on.

Firefox

IE9