css @media print not working

Question

I am trying to change style of printed document using css (@media print) and have defined a simple style to change the heading fontsize while printing. However the style for print media is not changed at all. Could anyone tell where I went wrong? Thanks! Here's what I did

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testmediacss.aspx.cs" Inherits="PrintDemo1.testmediacss" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css" >
   @media print { body {font: 50pt Arial;} h1 {font-size: 138pt;} h2 {font-size: 15pt; color: #000;} }
    </style>
    <script type="text/javascript" language="javascript">
        function CallPrint(strid){
            var prtContent = document.getElementById(strid);
           var WinPrint = window.open('', '', 'letf=1000,top=1000,width=1000,height=500,toolbar=0,scrollbars=0,status=0');
           WinPrint.document.write(prtContent.innerHTML);
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();
       }
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div  id="divprint">
        <p>hello this is the part to be printed in the printer.</p>

        <h1>hello world</h1>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="CallPrint('divprint');" />

    </form>
</body>
</html>

though you have a typo in window.open i.e. letf(it shd be left), but still it works for me. even on IE 8 — Manish Mishra
– Manish Mishra, Commented Apr 10, 2013 at 7:34
@ScottBartell though it is valid it still donesn't show the desired result.Don't know why. — Adhikari Sujan
– Adhikari Sujan, Commented Apr 10, 2013 at 10:34

Jack Thomson · Accepted Answer · 2013-04-10 07:45:04Z

2

I have always used both media print and media screen when defining css.

@media print
{
  h1 {font-size: 138pt;}
}
@media screen
{
 h1 { font size: 95pt;}
}

It will show up on the screen as 95 point text, but print as the 138 point text.

answered Apr 10, 2013 at 7:45

Jack Thomson

453 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pzin Over a year ago

There's no need to specify screen because it's the default value.

Steph Sharp · Accepted Answer · 2013-10-03 05:23:37Z

0

Use this instead:

var WinPrint = window.open('', '', 'left=1000,top=1000,width=1000,height=500,toolbar=0,scrollbars=0,status=0');

Not letf

edited Oct 3, 2013 at 5:23

Steph Sharp

11.7k5 gold badges46 silver badges84 bronze badges

answered Oct 3, 2013 at 5:03

Amit

1

Comments

Serj Sagan · Accepted Answer · 2014-01-30 21:17:34Z

0

Sometimes, at least in Chrome, that CSS just gets ignored...after pressing Ctrl + R like 20 times, or even better clearing your cache, it will finally work...

answered Jan 30, 2014 at 21:17

Serj Sagan

30.6k17 gold badges159 silver badges190 bronze badges

Collectives™ on Stack Overflow

css @media print not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related