IE prints blank line after space when space precedes te tag when printed to actual printer, but not when IE browser renders HTML
I ran into a styling issue today where 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 as the printer and reproduced it. If you are viewing HTML in a browser, there is no blank line under the Barbiturates family of substances for IE 9 or any other browser for that matter. This is the tr td tag of the table with multiple rows in it. A line with a space at the end of it and <br>
after printing a blank line. I have double checked the styles and there is no media = 'print' attribute for any styles. If I remove the space at the end of the line, it doesn't print an empty line. I will eventually resolve this by fixing it next week, but if you're a CSS genius and can tell me what that means, I'll give you a few points.
Yes, I can solve this by removing the space, but I will only accept answers that tell me which style is causing this or which style to add.
I removed all HTML markup around the problem, so the HTML is so 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>
source to share
This is definitely a weird error, but it has to do with your table width being undefined. By default, a table without a set width is automatically adjusted to the width of its containing content, which is the maximum available in its container. Now here's the wonderful piece of mistakes ...
Typically in HTML view this is ignored because this white space ends up (by the browser) as if it didn't exist. But apparently in print mode this white space is partially ignored. It is ignored in the sense that the extra space is not used to continue expanding the table, but the print function still sees it there for whatever reason. So that...
The width of the table is defined as the size of that line without a space, and then when printed, it tries to "re-add" that space to the line by typing it down to the next line below that before going on another new line.
You've already identified one solution for this error: removing the space at the end of the line. Keep in mind that this will happen with any line that happens to be the longest line in the text and also has trailing space at the end of the line. For example, if I remove this line entirely and add a space to the end of the MDEA line (which is the next longest), that line will 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 it's generated text or something else, it might not be an option. Another solution is to set the width of the table to 100% (I added it to the outer table) so that it spans the entire page (and therefore doesn't need to define its own width).
Also, as pointed out in the comments, you are using IE7 compatibility mode , which is where the error is located. IE9 doesn't actually have this bug (I've tested), so removing that meta element will fix the problem as well (if you don't need compatibility mode).
source to share