Issues with two browsers on print invoice/delivery note

Hi @scruffy1,

Thank you for appreciating our plugin.

I have tried to replicate your issue on our staging site but I am not able to replicate it. To me, when I tried to see the print invoice on another browser, no change is there in the CSS.

So, could you please share the screenshot of the issue which you are facing so that we can check and let you know.

Regards,
Kenil Shah

Hi Kenil,

Thanks for the reply. There does not appear to be an image upload on the forum, so I will post the CSS code for you.

Thanks Tracey

/* Simple CSS Reset and Print options
------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
	border: 0 none;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Template Page Layout
------------------------------------------*/

/* Main Body */
body {
	background: #fff;
	color: #333;
	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-size: 98%;
	line-height: 1.25em;
}

h1,
h2,
h3,
h4 {
color: red;
	font-weight: bold;
	margin-bottom: 1em;
}

ul {
	margin-bottom: 1.25em;
}

li,
dt,
dd  {
	padding: 0.375em 0;
}

dt {
	font-weight: bold;
}

p + p {
	margin-top: 1.20em;
}

address {
	font-style: normal;
}

/* Basic Table Styling */
table {
	page-break-inside: auto;
	width: 100%;
}

tr {
	page-break-inside: avoid;
	page-break-after: auto;	
	border-bottom: 0.10em dotted #ccc;
}

td,
th {
color: #333;
	padding: 0.375em 0.75em 0.375em 0;
	vertical-align: top;
}

td img,
th img {
	vertical-align: top;
}

th {
	color: #333;
	font-weight: bold;
	text-align: left;
	padding-bottom: 1em;
}

tfoot {
	display: table-row-group;
}

/* Page Margins & Basic Stylings */
#page {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-size: 0.875em;
}

.content {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 3%;
	padding-bottom: 3%;
}

.content + .content {
	page-break-before: always;
}

h1,
h2 {
	font-size: 1.50em;
}

.order-branding,
.order-addresses,
.order-info,
.order-items,
.order-notes,
.order-thanks,
.order-colophon {
	margin-bottom: 3em;
}

.order-items {
	page-break-before: auto;
	page-break-after: auto;
}

/* Order Branding */
.order-branding .company-logo {
	margin-bottom: 0.5em;
	float: right;
	width: 52%;
	/*margin-left: 40em;*/
}

/* Order Addresses */
.order-addresses {
	margin-bottom: 6em;
}

.order-addresses:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.billing-address {
	width: 50%;
	float: left;
}

.shipping-address {
	width: 50%;
	float: left;
	font-size: 1.5em; /*font size for delivery address and heading */
}

.order-addresses.no-shipping-address .shipping-address {
	display: none;
}

/*
.order-addresses.no-shipping-address .billing-address {
	margin-left: 50%;
}
*/

/* Switch the addresses for invoices */

/* Order Info top line*/
.order-info ul {
	border-top: 0.20em dotted #ccc;
	width: 55%;
}
/* top part of delivery note and font color */
.order-info li {
	color: #666;
	font-size: 0.85em;
	border-bottom: 0.10em dotted #ccc;
	width: 55%;
}

.order-info li strong {
	min-width: 35%;
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 0;
	/*padding-right: 0.35em;*/
}

/* Order Items size of table for bottom section*/
.order-items {
	margin-bottom: 1em;
	width: 90%;
}

.order-items .head-name,
.order-items .product-name,
.order-items .total-name {
	width: 60%;
}

.order-items .head-quantity,
.order-items .product-quantity,
.order-items .total-quantity,
.order-items .head-item-price,
.order-items .product-item-price,
.order-items .total-item-price {
	width: 20%;
}

.order-items .head-price,
.order-items .product-price,
.order-items .total-price {
	width: 20%;
}

.order-items p {
	display: inline;
	font-size: 0.785em;
	font-weight: normal;
}

.order-items small,
.order-items dt,
.order-items dd {
	font-size: 0.785em;
	font-weight: normal;
	color: red;
	line-height: 130%;
	padding: 0;
	margin: 0;
}

.order-items dt,
.order-items dd {
	display: block;
	float: left;
}

.order-items dt {
	clear: left;
	padding-right: 0.2em;
}

.order-items tfoot tr:first-child,
.order-items tfoot tr:last-child {
	font-weight: bold;
}

.order-items tfoot tr:last-child .total-price .amount:first-child {
	font-size: 1.273em;
	font-weight: bold;
	line-height: 200%;
}

.order-items tfoot tr:last-child {
	border-bottom: 0.20em dotted #ccc; /* bottom line */
}

/* Order Notes */
.order-notes {
	margin-top: 3em;
	font-size: 0.785em;
	line-height: 140%;
	margin-bottom: 4em;
}

.order-notes h4 {
	margin-bottom: 0;
}

/* Order Thanks */
.order-thanks {
	margin-left: 50%;
}

/* Order Colophon */
.order-colophon {
	font-size: 0.585em;
	line-height: 120%;
	margin-bottom: 0;
}

.colophon-policies {
	margin-bottom: 1.20em;
}

/* CSS Media Queries for Print
------------------------------------------*/

@media print {
	body {
		font-size: 7.5pt;
	}
	
	.content {
		/* Remove padding to not generate empty follow up pages */
		padding-bottom: 0;
	}
}

Hi @scruffy1,

Sorry for the delay in response.

Regarding the query, when the print popup comes up we have the option to set the margins you want. So, could you please those and let us know whether it worked for you or not.

Regards,
Kenil Shah