Printing html page results in blank page first
I have a ecommerce site that is hosted by Yahoo Small Business. When I receive an order I have been printing a pdf (generated by Yahoo) but a problem has cropped up recently that their tech support is not interested in fixing.
That's not important.
What I did was investigate other ways besides the pdf download to get my invoices. They have an option to display it as an HTML page that I can print, the problem that occurs in the pdf download is not repeated there so it seems perfect, right?
However when I print the invoice a single page invoice prints as 2 pages- the first page out is completely blank, the second page is the correctly formatted and laid out invoice. I tried it in Microsoft Edge and it prints correctly (single page).
When I looked at the (editable) HTML I don't see anything that could be causing a page break from the get-go so I don't know what is going wrong.
Here is the code from the page (top portion before the invoice tables), something in here must be triggering a page break but I am not a CSS coder, I'm a business owner that gets forced into it-
"<style>
- {font-family:Arial, monospaced;background-color:white;color:black;}
.items_table {width:100%;text-align:right;border-collapse:collapse;font-size:small;} thead > tr {border-bottom:solid 1px #000;} th {text-align:right;}
.totals_row_top > td {padding-top:1em;} .tr_odd {background-color:white;} .tr_odd > td {background-color:white;} .tr_even {background-color:#aaaaaa;} .tr_even > td {background-color:#aaaaaa;} td {min-width:3em;padding-left:1em;} .price_col {text-align:right;} .totals_key {font-weight:bold;padding-top:0.25em;} .item_name > ul {font-size:small;list-style-type:none;background-color:inherit;} li {background-color:inherit;}
fieldset {margin-top:0.5em;margin-bottom:0.5em;border-radius:5px;}
.ship_bill_info, .masthead {width:100%;display:flex;} .shipto, .billto, .orderinfo {min-width:30%;margin-left:auto;margin-right:auto;font-size:small;} .orderinfo_table {font-size:small;} .separator {border-bottom:none;border-right:none;border-left:none;border-radius:0;} </style>
Any help would be appreciated.