gmail html preview removes css rule with page-break-after properties

We send a html file as an attachment to our users. The html has the following div to force a page break while printing.

<div style="page-break-after:always;"> </div>

When you preview this html using gmail. Gmail removes this div.

Any work out on how we can force a page break in html page which is previewed in gmail?

Any help will be much appreciated.

Thanks.

roshodgekiss roshodgekiss, 2 years ago

Hi frontendboss, welcome to the forums. When you say that you 'send the HTML file as an attachment', what do you mean?

In the context of regular HTML email, Gmail is known to remove CSS styles that is doesn't like. However, you can try adding !important; and see if that helps.

While there may not necessarily be a way to force line breaks in Gmail using CSS, you may want to experiment with the techniques in this post on print stylesheets in email. Thanks, frontendboss! Let us know how you go :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
frontendboss, 2 years ago

Thanks Roshodgekiss,

I will try to explain the problem in detail.

Once a user completes the registration with us, we send an html file as an attachment which has the registration details that you can print. The registration detail are divided into multiple pages. Because we want these details to be printed in different pages, we are forcing a page break using the css style : page-break-after.

If you preview this html file in a browser independently, it works perfectly. Prints the details in separate pages.

The problem is when you preview this html page through gmail.

Gmail opens the page using https://mail-attachment.googleusercontent.com/attachment/?u..........

Now when you check the view source - you will notice any style with page-break-after properties are stripped. When you try to print, the page breaks do not work.

I hope the problem is clear now.

Thanks,
Parvez

roshodgekiss roshodgekiss, 2 years ago

Hi Parvez, as you can't send attachments via Campaign Monitor, this is a little out of our area of experience, I'm sorry to say. Also, opening HTML docs in Gmail is prone to all sorts of CSS funkiness, as I've mentioned earlier.

If you would like full control over a printable document, I'd recommend:

- linking to a page with registration details on your server (you can pass details like registrant name, ticket no. etc from the email to pre-populate it)
- attaching a PDF (which is better suited to print)

Thanks, Parvez! I hope this helps :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
frontendboss, 2 years ago

Thanks Rosanne,

In regards to this issue, we are not using campaign monitor to send attachment. Like you correctly mentioned when you preview an html in gmail environment it strips lot of css styles.

In regards to your recommendations:

- We are already providing link to an online html page to take a print out.
- Other recommendations that we suggested was a pdf version and
- Send different htmls files if the information needs to be printed on different pages

Thanks a lot for taking time to answer the questions.

-Parvez

roshodgekiss roshodgekiss, 2 years ago

No problem, Parvez - glad I could help out here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account