CODEWITHSUNDEEP
css
Bhim Prasad Ale
Bhim Prasad Ale

Reputation: 523

@media print css doesnot gives the desire output

I have use the @media print and @media screen for print. For @media screen it works fine but for @media print it doesnot show the dotted table as screen.

   @media screen{
    body{
        font-family:"Courier New", Courier, monospace;  
        font-size:13px;
    }
    .f1{
        text-transform:uppercase;
        display:block;
        text-align:center;
    }

    .f2{
        text-transform:uppercase;
        display:block;
        margin-left:10px;
    }

    .border_bottom{
        border-bottom:2px dashed #000;
    }
    .border_top{
        border-top:2px dashed #000;
    }

    .body_table{
        border:1px dashed #CCCCCC;
        padding:.5em;
    }   
}

   @media print {
            body {
                font: 12pt georgia,serif;
            }

            h1 {
                font-size: 18pt;
            }

    h2 {
        font-size: 15pt;
        color: #000;
    }

                 .border_bottom{
        border-bottom:2px dashed #000;
    }
    .border_top{
        border-top:2px dashed #000;
    }

    .body_table{
        border:1px dashed #CCCCCC;
        padding:.5em;
            }
        }

by these above code the @media screen works fine as i thought. i.e I can see the bill with the dotted border but while on printing part the dotted border is not working and not shown. The bill are on table and as I print the table is not seen too.

My Html code

<body >
    <form id="form1" runat="server">
    <div id="divprint">
        <table>
            <tr>
                <td>name</td>
            </tr>
            <tr>
                <td>Roll</td>
            </tr>
        </table>

    </div>
        <asp:button runat="server" ID="btn_prnt" OnClientClick="CallPrint('divprint')" Text="Print"  />
    </form>
</body>

Note: I am using Waterfox 18.0.1 browers.

Upvotes: 3

Views: 722

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23883

The HTML you provided does not contain .border_top and .body_table elements. Thus, no borders. Please share the valid CSS and HTML via the http://codepen.io or http://jsbin.com .

When preparing a page for printing, browsers remove some of the decoration. Backgrounds are removed in most browsers. Maybe borders are removed too?

Upvotes: 2

Related Questions