Print text positioned in image

Question

I have text positioned in the center of an image, the logic is to print a certificate, and this text is generated dynamically, this occurs correctly. The problem is at the time of printing, that the text is on page 2 the image on page 1

HTML:

<div id="DivImpressao">
    <section id="AtestadoTecnico">                          
        <img id="imgAtestado" src="~/Images/Site/AtestadoTecnico.png" runat="server" class="imgAtestadoTecnico" height="685" />                           
        <div class="txtAtestadoTecnico">
            <div style="text-align: justify; font-family: Ebrima; font-size: 10pt; margin-top: 20px">
                //texto aqui
            </div>
        </div>
    </section>
</div>

CSS:

#AtestadoTecnico {
    width: 1014px;
    height: 670px;
    position: relative;
}

.imgAtestadoTecnico {
    top: 0px;
    bottom: 20px;
    position: absolute;
}

.txtAtestadoTecnico {
    top: 100px;
    left: 120px;
    position: absolute;
}

JavaScript (aqui eu passo a "DivImpressao" como parâmetro para impressão:

function imprimePanel(elementId) {
    var printContent = document.getElementById(elementId);
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();
    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
    printWindow.document.write(printContent.innerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

Answer 1

Taken from W3C spec .

Authors are cautioned that the nesting of floats, divs, and absolutely positioned boxes within themselves, each other, and table cells should be used carefully, since the nesting depth of these constructs is printer and implementation dependent.

Which basically says that you should not use absolute positioning for a print because every browser and printer may (and will) do it differently (read, not the way you would expect/want).

Your best bet is either to create a simple document without using absolute positioning (that you may use for printing purposes), or use some third-party application to create PDF out of this document.

Answer 2

Guessing your style sheet is linked with media="screen" . Like:

<link rel="stylesheet" href="css/style.css" media="screen" />

If the CSS you have should work for both print and screen you can simply remove the media attribute like:

<link rel="stylesheet" href="css/style.css" />

To define print-specific styles within the 'global' stylesheet, wrap them within

@media screen {
    .print-only-styles-here {...}
}

Or you can create a second stylesheet exclusively for print:

<link rel="stylesheet" href="css/print.css" media="print" />