I've encountered something that bugged me while testing my email marketing campaigns.
So here goes:
I use the following code so that images and some other bits won't print when a user prints the e-mail (It is for a hotel group so emails are printed often, with booking numbers and all).
<style media="print">
body { background-color:#FFFFFF; }
.no-print { display:none; }
</style>
Now, outlook 2007/10/13, aol mail and some other clients seem to consider themselves as printed media and apply the display:none rule on every no-print element, leaving the email in a dire state of emptiness.
I could remove it all completely, but that wouldn't be good practices for ecology.
Do any of you guys know of a work around?
Like a way to force outlook to consider itself as a screen media?
Thanks a lot.
Now that I have a better understanding of the question I think I found the beginning of a possible solution for you. This should ensure the printer style sheets CSS still work, but aren't displayed by clients, like Outlook 2007, when they shouldn't be.
- Ran test with email 'as is' and sure enough Outlook 2007 was blank because it applied the print style sheets
- Then I added this media query in the code example below
- Outlook 2007 shows up with the other clients so it's ignoring the print stylesheet
- Now in Google Chrome's print preview the text with
.no-print
doesn't display
Code Excerpt:
<style media="print">
@media only print {
body { background-color:#FFFFFF; }
.no-print { display:none; }
}
</style>
</head>
<body >
<h1 class="no-print" style="font-size: 36px">LINE OF TEXT</h1>
Email Testing Link: https://litmus.com/pub/49bfd3b