Q: What's wrong with my iFrame before and after printing with CSS or Javascript 
*

*I would like to know what happen with my iFrame as the
table in the picture 1 below which has font-size: 20px and the Date,
Requester, Place From... got the font-size approximately
12-14px.

*Then, I've printed that page out. There was something wrong with all
text's size in the table as the iFrame. (Please take a look on the
font-size with the picture 2 below).

*After that, I've tried to add font-size to CarBookingCSS.txt in
order to make a change for the iFrame as the code below but it still
didn't work.


CSS:
iframe {
font-size: 50px !important;
}

or
#iframe_link {
font-size: 50px !important;
}

Summary: The font-size of the iFrame as the table before printing and after printing are totally different. Although I've had some change with the CarBookingCSS.txt, it still didn't work a bit.

Pic 1:

Pic 2:


HTML:
<input onclick="printDiv('page_printer');" type="button" value="Print" />
<table id="page_printer">
    <tr>
        <td>
        <fieldset class="box">
                <legend class="text_transportation">EMPLOYEE GATE PASS</legend>
            <table>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Date</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div>2014</div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Requester</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Place From</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div>P1</div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Place To</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div>P3</div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Purpose</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div></div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Business date - From</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div>2014</div>
                    </td>
                </tr>
                <tr>
                    <td width="190px" valign="top" class="ms-formlabel">
                        <H3 class="ms-standardheader">
                            <nobr>Business date - To</nobr>
                        </H3>
                    </td>
                    <td width="400px" valign="top" class="ms-formbody">
                        <div>2014</div>
                    </td>
                </tr>
            </table>
        </fieldset>
        </td>
    </tr>
</table>

Javascript:
    function printDiv(divID) {
    var printContent = document.getElementById(divID);
    var windowUrl = '';
    var uniqueName = new Date();
    var windowName = 'Print' ;
    var printWindow = window.open(windowUrl, windowName, 'left=-20,top=-20,width=800px,height=600px');
    printWindow.document.write("<HTML><Head><Title></Title><link rel='stylesheet' type='text/css' href='/Style%20Library/CarBookingCSS.txt' media='print' />");
    printWindow.document.write("</Head><Body style='margin-left:10px;margin-top:0px;font-weight:bold'>");
    printWindow.document.write(printContent.innerHTML);
    printWindow.document.write('</Body></HTML>');
    printWindow.document.close();
    printWindow.focus();
    //Print Page
    setTimeout(function () { print_page(); }, 1000);
    function print_page() {
        printWindow.print();
    }

    //Restore orignal HTML
    setTimeout(function () { restore_page(); }, 6000);
    function restore_page() {    
        printWindow.close();
    }
}

CSS:
.ms-bodyareaframe {
    padding: 8px;
    border: none;
}
.text_transportation {
    font-size: large;
    color: red;
}
.text_approveStep {
    font-size: large;
    color: red;
}
.box {
    width: 750px !important;
}
.set_width {
    width: 350px !important;
}
.set_backgr {
    text-decoration: none !important;
    color: #0072BC !important;
    font-family: Verdana, Arial, sans-serif !important;
    border: none !important;
    background-color: #F6F6F6 !important;
}
.set_backgr:hover {
    text-decoration: none !important;
    cursor: pointer;
}
.readOnly {
    background-color: #F6F6F6 !important;
    color: #676767 !important;
    border: none !important;
    cursor: default;
}


A: your css may included in the html with something like:
<link rel="stylesheet" type="text/css" href="theme.css" media="screen" />

either delete the media="screen", or add another for printing:
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

http://www.w3schools.com/tags/att_link_media.asp

A: I think the print window doesn't get the CSS classes, so it just shows whatever there is on the HTML.. however, if the style is on the HTML, i think that it will be applied. Not entirely sure though haha but i did something like this i while ago.
