2

Today, I ran into a styling issue when an HTML page is printed to a printer from IE 9 (but not when I print to a printer in other browsers). I used CutePDFWriter to do the same thing the printer does and reproduced it. If you view the HTML in the browser, there is no blank line below the Barbiturates substance family for IE 9 or any other browser for that matter. This is a table tr td tag with multiple lines in it. The line with a space at the end of it, and a <br> following prints a blank line. I double checked the styles and there is not a media='print' attribute on any styles. If I remove the space at the end of the line, it doesn't print the blank line. I will eventually solve this by process of elimination next week, but if you're a CSS genius and can tell me what's causing this, I'll give you some points.

Yes, I can solve it by removing the space, but I will only accept answers that tells me what style(s) is causing this or what style(s) to add.

enter image description here

I removed all the HTML markup around the issue so the HTML so it's easy to see.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">


        <title>SNIP</title>
    <script type="text/javascript" src="report_files/prototype.js"></script>
    <script type="text/javascript" src="report_files/script.js"></script>
    <script type="text/javascript" src="report_files/effects.js"></script>
    <script type="text/javascript" src="report_files/window.js"></script>
    <script type="text/javascript" src="report_files/md5.js"></script>
    <script type="text/javascript" src="report_files/jquery-1.js"></script>
    <script type="text/javascript" src="report_files/jquery-ui-1.js"></script>
    <script type="text/javascript">
        $.noConflict();

        jQuery(document).ready(function() {
          jQuery('.LIMSFormField').focus(function() {
              jQuery(this).css('border-color', '#000000');
              jQuery(this).css('background-color', '#90EE90');
          }).blur(function() {
              jQuery(this).css('border-color', '#FFFFFF');
              jQuery(this).css('background-color', '#7AC5CD');
          });
        });
    </script>
    <script type="text/javascript" src="report_files/droplinemenu.js"></script>
    <script type="text/javascript">
      droplinemenu.buildmenu("mainMenu");
    </script>

    <script type="text/javascript" src="report_files/jslib.js"></script>
                <meta name="vs_defaultClientScript" content="JavaScript">
                <meta http-equiv="Expires" content="0">
                <meta http-equiv="Cache-Control" content="no-cache">
                <meta http-equiv="Pragma" content="no-cache">

    </head>
        <body>
            <div id="sessionRefresh" style="display:none">
                        <div style="text-align: center; width: 250px">
                            <div>Your session is about to expire</div>
                            <div id="btnRefresh" class="submitbutton" style="margin: 15 auto; float:none">
                                <a href="javascript:void(0)" onclick="resetSessionTimer()">Keep Alive</a>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>

        <script type="text/javascript" language="JavaScript">
            var currentDS = new Date(2012,3,9,15,37,13);
            var forceLogOffDS = new Date(2012,3,9,16,7,13);
            var forceLogOffDifference = forceLogOffDS - currentDS;
            var logoutTimer = window.setTimeout('LogoffSessionTimeout()', forceLogOffDifference);
        </script>
<form name="Form1" method="post" action="ResultReportPrintPage.aspx?TestIds=956542%2c956543%2c956545%2c956546&amp;ShowSummary=False&amp;CausePrintDialog=True" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ4NDA1OTg3OWRkdXgKbQNiK5Ot/Yx+zK7sKevaBb8=" type="hidden">
</div>


<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
return CheckSubmit();
return true;
}
//]]>
</script>

<style type="text/css">
    td, select, input, .copyright, div
    {
        font-family: "times new roman";
        font-size: 12px;
        color: #000000
    }
    .worksheetPage { font-size: 12; width: 100%; height: 98%; page-break-after: always }
    .lastWorksheetPage { font-size: 12; width: 100%; height: 98% }
    .ResultDetails { }
    .ResultDetails td { }
    .UnderlinedCell { border-bottom: 1px solid #0066cc; PADDING-RIGHT: 10px; PADDING-LEFT: 10px }
    .LanAndSpecimenId td { font-size: 14px }
    .LanAndSpecimenIdLabel { text-align: right }
    .LanAndSpecimenIdValue { border-bottom: 1px solid #0066cc; font-weight: bold; text-align: center; PADDING-RIGHT: 15px; PADDING-LEFT: 15px }
    .DatesValue { text-align:center; border-bottom: 1px solid #0066cc; PADDING-RIGHT: 10px; PADDING-LEFT: 10px }
    .FirstTestName { font-weight: bold; font-size: 17 px }
    .TestDescription { font-size: 12px }
    .ProcessHeader { font-weight: bold; font-size: 14px; border-bottom: 1px solid #0066cc }
    .ProcessDetails { }
    .SubProcessDetailsHeader td { font-weight: bold; font-size: 15px }
    .ExplainMeasurements td { font-style: italic; font-size: 13px; border-bottom: 1px solid #0066cc }
    .HighlightedSubprocessResults { font-weight: bold }
    .BigFinalResults { border: 2px solid #000000 }
    .BigFinalResultsHeader { font-weight: bold; font-size: 16px; border-bottom: 2px solid #000000 }
    .BigFinalResultsResult { font-weight: bold; font-size: 14px }
    .BigFinalQuantitative { font-weight: bold; font-size: 14px }
    .NotesHeader { text-align:center; font-weight: bold }
    .NotesTable td { font-size: 12 px }
    .CompanyContactFooter { text-align: center; font-weight: bold; font-size: 13px }

    .worksheetGrid { width: 100%;border: 1px solid #000000 }
    .worksheetGrid td, th { border-right: 1px solid #000000;border-bottom: 1px solid #000000 }
    th
    { COLOR: #003366; vertical-align:   baseline;
        font-size:  1em;
        font-weight:    bold;
        word-spacing:   normal;
        letter-spacing: normal;
        text-transform: none;
        font-family: Arial, Helvetica, sans-serif
    }
</style>
        <link rel="stylesheet" type="text/css" href="report_files/NYReports.css">

        <table>
            <tbody><tr>
                <td>
                    <table style="border-width: 0px;" cellpadding="0" cellspacing="0">

                        <tbody><tr>
                            <td>Test(s) Requested:</td>

                            <td>
                                <img src="report_files/spacer.gif" alt="" height="1" width="20">
                            </td>
                            <td class="FirstTestName">Oral Fluid 10 Drug Panel Test</td>
                        </tr>
                    </tbody></table>
                </td>
            </tr>
            <tr><td class="TestDescription">The Oral Fluid 10 Drug Panel Test includes:<br>Amphetamine - Amphetamine<br>Methamphetamine/Ecstasy (MDMA) - Methamphetamine, Ecstasy (MDMA), MDA, MDEA<br>Cocaine - Cocaine, Benzoylecgonine<br>Opiates - Codeine, Morphine, Heroin Metabolite, Hydrocodone (Vicodin, Lorcet, Lortab)<br>Phencyclidine (PCP)<br>THC (Marijuana)<br>Barbiturates - Secobarbital, Butabarbital, Butalbital, Pentobarbital, Phenobarbital and Amobarbital <br />Benzodiazepines  - Diazpam, Nordiazepam, Alprazolam and alpha-hydroxyalprazolam<br>Oxycodone (Percocet)<br>Methadone</td></tr>
        </tbody></table>


        </body></html>
JustBeingHelpful
  • 18,332
  • 38
  • 160
  • 245
  • 1
    This is not IE9 specific behavior, instead it's IE7 specific behavior since you use an IE7 emulation (``). – Zeta Mar 09 '12 at 22:20
  • 1
    I pasted your HTML into [validator.w3.org](http://validator.w3.org/) and it came back with errors, including ` – Stephen P Mar 09 '12 at 22:33
  • @Zeta, so that's interesting.. removing that eliminated the blank line :-) I wonder what style in IE 7 would cause that? – JustBeingHelpful Mar 09 '12 at 22:33
  • @Stephen P, is the general rule for IE that if something doesn't pass the validation, IE goes into quirks mode, and bad things can happen as a result? Next week, I'll try cleaning those up and see what happens – JustBeingHelpful Mar 09 '12 at 22:35
  • It's not a style, it's a feature :D. Nah, I guess it's related to the [whitespace bug](http://www.hicksdesign.co.uk/journal/ie-whitespace-bug). The IE calculated the width of your table according to all non-whitespace symbols in the widest row, which will work in view-mode. But if you print IE still uses the same size for this row, but tries to squish the whitespace before `
    ` into the row, which will result in a line break before the actual `
    `. If you use `width:100%;` in your table you're fine, even in IE7 (except your table *is* already `width:100%`).     – Zeta Mar 09 '12 at 22:38
  • @MacGyver - not sure I could call it a _general_ rule, but it's more to do with having to make assumptions so it can correct an invalid structure, e.g. the `
    ` probably wouldn't, by itself, cause Quirks Mode. You can use the IE debugging tools to actually see what emulation mode and rendering mode the browser is using.     – Stephen P Mar 09 '12 at 22:46

1 Answers1

2

This is definitely a weird bug, but it has to do with your table width being undefined. By default a table with no set width automatically adjusts to the width of its containing content, up to the maximum available within its container. Now here comes the fun bug part...

Normally in HTML view, this is ignored because that end white-space gets stripped (by the browser) like it doesn't exist. But apparently going into print mode, that white-space only gets partially ignored. It gets ignored in the sense that the extra space is not used to continue expanding the table, but the printing function for whatever reason still sees that it is there. So...

The table's width has been determined to be the size of that line without the space, then when printing it attempts to "re-add" that space to the line, bumping it down to the next line below that, before breaking to another new line.

You've already identified one solution to this bug: removing the space at the end of the line. Keep in mind that this would occur with whatever line happened to be the longest line in the text and also had a trailing space at the end of the line. For example, if I completely removed that line and added a space to the end of the MDEA line (which is the next longest), that line would then have a "spare line break" below it, following the same pattern.

Removing the space would be the most viable solution, if the text entries are manual. If this is generated text or something, that may not be the option. Another solution is to set the table's width to 100% (I added it to the outer table) so it spans across the entire page (and thus doesn't have to figure out its own width).

Also, as pointed out in the comments, you are using IE7 compatibility mode, which is where the bug is at. IE9 actually doesn't have this bug (I tested), so removing that meta element would also fix the issue (if you don't need the compatibility mode).

animuson
  • 53,861
  • 28
  • 137
  • 147