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.
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&ShowSummary=False&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>
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).