Chrome print preview text overlap - html

Question

Need help figuring this out. I've tried adding additional margins and padding to the text and also cells in the hope it resolves but haven't been successful.
The issue only happens in chrome
Here is some code. this is the master print.css
#page
{
size: size 21cm 29.5cm portrait;
margin: 1.3cm;
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Page Layout
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
body { padding: 0px; margin: 0px; }
div.OuterShell { width: 100%; border: none !important; padding: 0px; margin: 0px; }
div.InnerShell { width: 100%; border: none !important; padding: 0px; margin: 0px; }
div.OuterShell { box-shadow: none; }
div.CollapseButtons, .ajax__tab_outer, .TableOptions{ display:none !important; visibility:hidden; }
div.Header { display: none; }
div.Footer { display: none; }
div.ContentHolder { padding: 0px; margin: 0px; width: 100%; }
div.LeftColumn { display: none !important; }
div.RightColumn { display: none; }
div.Submit, div.HSStatusIcon, div.Banner { display: none; }
div.MiddleColumn { margin: 0 !important; padding: 0 !important; border: none; width: auto !important; display: block !important; }
div.MiddleColumn3Col { margin: 0px; border: none; width: 100%; }
div.LoginStatus { display: none; }
div.MainMenu { display: none; }
div.SubMenu { display: none; }
div.CopyrightHolder { display: none; }
div.ReportTitle { display: none; }
div.ReportControls { display: none; }
div.FloatingOptions, .PrintHide, .ActionOptions, .InformationIcons { display: none; border: none !important; }
#tdAlerts { display:none; visibility:hidden !important;}
#thAlerts { display:none; visibility:hidden !important;}
#tdOptions { display:none; visibility:hidden !important;}
td.Notes { display:none; visibility:hidden !important;}
div.crumbs {display:none;}
a.DatePicker {display:none;}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
.PrintShow { visibility:visible !important; display:block !important; }
div.OuterShell
{
padding: 0 !important;
box-shadow: none !important;
}
div.ContentHolder
{
margin: 0 !important
}
div.MiddleColumn h1,
div.MiddleColumn3Col h1,
div.MiddleColumn1Col h1
{
color: #333333 !important;
font-family: inherit !important;
background-color: White !important;
text-transform: none !important;
font-size: 24px !important;
border-bottom: 0 !important;
}
div.InputGrid h3
{
color: #333333 !important;
background-color: #ffffff !important;
border-color: #cccccc !important;
}
div.InputGrid table
{
border-color: #cccccc !important;
}
div.InputGrid td.Label
{
border-color: #cccccc !important;
color: #333333 !important;
}
the page also pulls another print css sheet called paperwork. here it is
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Setup Page for Print
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
#page
{
size: size 21cm 29.5cm portrait;
margin: 1.3cm;
}
#media print
{
body { font-family: Arial; font-size: 11pt; padding: 0px !important; }
div.PaperWorkOuterShell { width: 100% !important; padding: 0px !important; margin: 0px !important; }
div.PaperWorkInnerShell { width: 100% !important; margin: 0px !important; }
div.PageBreak { page-break-before: always; border: none !important; }
div.PageBreakFix { height:1px; overflow:hidden; font-size:0px; }
div.Warning { display: none; margin:0 !important; }
div.PaperWorkContent { margin-bottom: 30px; }
div.NoPrint { display:none; margin: 0 !important; }
}
#media screen
{
div.PaperWorkContent { margin-bottom: 20px; }
div.PageBreak { margin-bottom: 30px; border-top: 1px dashed #999; }
}
/*-----------------------------------------------------------------------------
//-- PAPERWORK LOGO CSS
//---- A client may need this in their paperwork.css to resize the coords main paperwork logos
-----------------------------------------------------------------------------*/
div.PaperWorkHeader div.Logo { width: 200px; height:70px; overflow:hidden; text-align:center; margin: 0 auto 20px; }
div.PaperWorkHeader div.Logo img { max-height:70px; max-width: 200px; }
* html div.PaperWorkHeader div.Logo { width:200px; height:70px; } /* IE6 Fix as it doesnt support max-width/height */
* html div.PaperWorkHeader div.Logo img { height:70px; width:auto; }
div.PositionRight { position: absolute; top: 0; right: 0; }
/*-----------------------------------------------------------------------------
//-- For coord's coverletter
//---- A client may need this in their paperwork.css to resize logos on coord coverletters (e.g. LEBC contracts)
-----------------------------------------------------------------------------*/
div.Coverletter div.CoverLogo { width:300px; height:100px; overflow:hidden; text-align:right; }
div.Coverletter div.CoverLogo img { max-width:300px; max-height:100px; }
* html div.PaperWorkHeader div.CoverLogo img { height:100px; width:auto; }
/*-----------------------------------------------------------------------------
//-- For admin's coverletter
//---- A client may need this in their paperwork.css to resize logos on admin specific coverletters (e.g. ELI reminders)
-----------------------------------------------------------------------------*/
div.AdminHeader div.CoverLogo { height:80px; max-height:80px; overflow:hidden; text-align:right; }
div.AdminHeader div.CoverLogo img{ height:80px; max-height:80px }
* html div.AdminHeader div.CoverLogo, * html div.AdminHeader div.CoverLogo img { height:80px; }
/* some default coverletter stlying */
div.CoverletterContent, div.Coverletter { position:relative; }
div.CoverLetterAddress { top:60px; left:0px; text-align:left; }
div.CoverLetterAddress p{ line-height:1.4em; font-size:100%; margin:0 !important; padding:0 !important; }
div.CoverLetterHeader,
div.Coverletter div.RowHolder { background:none !important; }
div.Coverletter { height:auto !important; text-align:right; }
.Window
{
margin-top:15px !important;
}
.Window-Extended
{
margin-top:20px !important;
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Redefine HTML tags
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
body { padding: 0 20px; background: #EEE; color: #000; font-family: Arial; font-size: 10pt; }
form { padding: 0px; margin: 0px; }
hr { color: #999; border-color: #999; }
hr { color: #FFF; background: none; border-bottom: 1px solid #999; height: 1px; margin: 20px 0px 5px; padding: 0px; }
hr.Dotted { border: 0; padding: 0; border-bottom: 1px dotted #999; }
a.:link, a:visited, a:hover { color: #000; text-decoration: none; }
a.PaperworkLink:link, a.PaperworkLink:visited, a.PaperworkLink:hover { color: #006699; text-decoration: underline; }
/* fix IE7 */
*:first-child+html hr { margin: 5px 0px 0px; }
*:first-child+html hr.Top { margin-top: 10px; }
/* fix IE 6 */
* html hr { margin: 5px 0px 0px; }
* html hr.Top { margin-top: 10px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Paperwork Page Layout
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
div.Error img { float: left; margin: 7px; }
div.Error { position:relative; padding: 10px 10px 10px 40px; }
div.Error { color: #CC0000; border: 1px solid #E47676; margin: 0px 0px 20px; background: #FAE5E5 url('../Images/Icons/MessageBox/critical.gif') no-repeat scroll 7px 50%; }
div.Error div.Container p, div.Error div.Container h2 { background:#ea6154; }
div.Error div.Icon { background: url('../Images/Icons/MessageBox/Error_Important.png') no-repeat scroll 5px 50% !important; }
div.Error div.Icon_Lrg { background: url('../Images/Icons/MessageBox/Error_Important_Lrg.png') no-repeat scroll 0 50% !important; }
div.Error div.AreaEmployer div.Icon { background: url('../Images/Icons/MessageBox/Error_EmpArea.png') no-repeat scroll 0 50% !important; }
div.Error div.AreaEmployer div.Icon_Lrg { background: url('../Images/Icons/MessageBox/Error_EmpArea_Lrg.png') no-repeat scroll 0 50% !important; }
div.Error div.AreaPlacement div.Icon { background: url('../Images/Icons/MessageBox/Error_EmpArea.png') no-repeat scroll 0 50% !important; }
div.Error div.AreaPlacement div.Icon_Lrg { background: url('../Images/Icons/MessageBox/Error_EmpArea_Lrg.png') no-repeat scroll 0 50% !important; }
div.Warning { padding: 8px; background: #FFFFCC; border: 1px solid #CC9933; color: #990000; }
div.Declaration { padding: 8px; background: #CCCCFF; border: 1px solid #000099; color: #000066; }
div.AgreedBy { font-size: 8pt; }
div.PaperWorkOuterShell { width: 700px; padding: 20px 0px; background: #FFF; }
div.PaperWorkInnerShell { width: 650px; margin: 0px auto; background: #FFF; color: #000; }
div.PaperWorkHeader { position: relative; height:140px;}
div.Slim {height:10px !important;}
div.PaperWorkHeader div.Title { position: absolute; left: 0px; bottom: 10px; font-size: 14pt; }
div.PaperWorkHeader div.Central { position: relative; text-align: center; margin: 20px 0px 0px; }
div.PaperWorkHeader div.Central_lrebp { width:100%; text-align:center; bottom:0px; }
div.PaperWorkHeader div.Address { position: absolute; left: 0px; top: 10px; font-size: 8pt; }
div.PaperWorkHeader div.OppID, div.OppIDHS { position: absolute; right: 0px; bottom: 10px; font-size: 8pt; }
div.PaperWorkHeader div.OppID span.LeftBordered, .LeftBordered { border-left: 1px solid #CCC; margin-left: 6px; padding-left: 6px; }
div.PageNumber { position: relative; text-align:right; font-size: 8pt; }
div.PaperWorkHeader div.PageNumber { position: absolute; right: 0px; top: 10px; font-size: 8pt; }
/* This is used when a page number appears in the top right corner and the header needs to float back up to remain aligned*/
div.TopFloat { top:-30px !important; }
div.Reminder p { font-size:120%; line-height:1.5em; }
div.Reminder h1 { border:none !important; width:auto; text-decoration:underline; padding:0 !important; }
div.PaperWorkContent { font-size: 8pt; }
div.PaperWorkContent h1 { border-bottom: 3px solid #000; font-size: 12pt; padding: 5px 12px; margin: 0px; }
div.PaperWorkContent h2 { margin: 0px 0px 2px; font-size: 100%; font-weight: bold; border: none; }
div.PaperWorkContent h2.SubHeading { font-size:120% !important; margin:0 0 5px 0; }
div.PaperWorkContent p { margin: 13px 0px; }
div.PaperWorkContent ul { margin: 0px 0px 0px 15px; padding: 0px; }
/* fix IE 6/7 */
* html div.PaperWorkContent ul,
*:first-child+html div.PaperWorkContent ul { margin-left: 15px; }
.DateBottom { border-bottom: 1px dotted #999;width:100px;display:inline-block; }
/* CLEAN STYLE - KS DEV ---------------------------------------------------------------------------------------------------------------------------------------------------- */
/*Table HTML Tags*/
table { border: none; border-collapse:collapse; page-break-inside: avoid; }
table th,
table td { border: 1px solid #AAA; margin: 0 !important; padding:5px; }
table th { background-color:#ccc !important; }
/*Table Text Tags*/
table h2 { vertical-align:top !important; }
/*Table Classes*/
td.Hazards { width: 23%; }
td.Risks { width: 23%; }
td.ControlMeasures { width: 30%; }
td.EmpControl { width: 25%; }
td.Number, td.Question, td.YesNo { padding-top: 6px; padding-bottom: 6px; }
td.Number { width: 10px; vertical-align: middle; }
td.Question { font-weight: normal; width: 230px; text-align: left; }
td.YesNo { min-width: 70px;}
td.Comments { font-weight: normal; width: 260px;}
th.Question { text-align: left; }
tr.StandardAssessment img.FirstTickBox,
img.FirstTickBox { padding-left: 0px; }
tr.StandardAssessment { background-color:#ccc; }
tr.StandardAssessment img{ padding-left: 20px; }
table.HSFormTable img { padding-left: 10px; }
td.High { background-color: #FF0000; }
td.Medium { background-color: #FFFF00; }
td.Low { background-color: #00FF00; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Paperwork Columns
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
div.RowHolder { background: #FFF; padding: 1px; }
div.RowHolder div { background: #FFF; }
div.RowHolder div.ColumnFull { margin: 3px; padding: 8px; border: 1px solid #CCC; }
div.RowHolder div.ColumnLeftWEXReqHeader { width: 46%; float: left; margin: 3px; padding: 8px; border: 1px solid #CCC; }
div.RowHolder div.ColumnRightWEXReqHeader { width: 52%; float: right; margin: 3px; padding: 8px; border: 1px solid #CCC; }
div.RowHolder div.ColumnLeft { width: 45%; float: left; margin: 3px; padding: 8px; border: 1px solid #CCC; }
div.RowHolder div.ColumnRight { width: 45%; float: right; margin: 3px; padding: 8px; border: 1px solid #CCC; }
div.RowHolder div.TableHolder { padding: 5px; }
div.RowHolder div.NoPadding { padding: 0px; margin: 0px; }
div.Cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: 0px; padding: 0px; background: transparent; }
div.RowHolder table { width: 100%; border: none; }
div.RowHolder table th,
div.RowHolder table td { border: 1px solid #666; padding: 3px 6px; }
div.RowHolder table td.Higher { height: 30px; vertical-align:top; }
div.RowHolder table th.TickOnly,
div.RowHolder table td.TickOnly { width: 16px; }
div.RowHolder table.AvailabilityReport th { background: none; border: 0; border-bottom: 1px solid #000; text-align: left; }
div.RowHolder table.AvailabilityReport td { border: 0; text-align: left; }
div.RowHolder table.AvailabilityReport tr.MonthYear { border-top: 1px solid #CCC; font-style: italic; }
div.RowHolder table.AvailabilityReport tr.FooterNote { border-top: 1px solid #000; font-style: italic; }
div.RowHolder table.AvailabilityReport tr.FooterNote td { padding-top: 10px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Overrides
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
.Border { border: 3px solid #000 !important; }
.BorderTop { border-top: 3px solid #000 !important; }
.BorderRight { border-right: 3px solid #000 !important; }
.NoBorder { border: none !important; }
.Central { text-align: center; }
.NoUnderline { text-decoration: none !important; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -- Padding for lists
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
ol li { padding-bottom:10px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
.left { float:left; }
.right { float:right; }
.both { clear:both; }
.bold { font-weight:bold; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.Uppercase { text-transform:uppercase; }
.red { color:Red; }
.lrgFont { font-size:120%; }
.SkillsTable ul { list-style:none; margin:0 0 0 5px !important; }

Answer 1

Vertical padding for specific table cells should work as long as you don't have fixed height (min-height, height).

Answer 2

I don't know whether I am right or not but I think you are giving fixed heights and sizes in pixels.
If you investigate, you may find that the different browsers have different default values for things like margins, padding, text size, font face, etc. That's probably what's tripping you up
also, I would be able to help you more if you share some code snippet