Archive

Posts Tagged ‘css’

Outlook 2007 e-mailing hell – eat div

January 15th, 2009
2 comments

We had to make an HTML mailing for a client. Enters our problem : Outlook 2007. So you thought you could use divs with fixed widths and background colours. Forget all about it, in fact, forget all about css based design.

Instead, use… tables.

In pre-school we were all taught “Tables are evil”, and should only be used for tabular data (duh). Thank you Bill, we’re back to square 1.

Let’s say you would like a red border around the  500 px wide content of your html mail, common sense tells us to use a div. However, our “favourite” e-mail program shows us it can’t be done. It joyfully extends the width of the div to the whole screen width.

So, the solution is to go back to some old-school table based html code, the nightmare !!!

In fact, we can forget about a lot of common html goodies, like background images, css floating or positioning.

So, the number one advice is : make sure you get a well designed html mailing that is both attractive to your customer, and plays nicely with e-mail clients, how good or how bad they are.

PS : don’t trust wysiwyg editors, trust notepad.

Author: hho Categories: Coding, HTML / CSS, Harald Hoffelinck Tags: , , ,

Having landscape and portrait orientation within 1 rendered PDF page

January 14th, 2009
2 comments

We needed to render a pdf from Salesforce, which is no issue at all. You just need to add the renderAs and get rid of the header and sidebar:

<apex:page renderAs="pdf" showheader="false" sidebar="false"
controller="Invoices_PDF_generation">

BUT, we also needed to make sure that in the pdf, the first part of the document was printed in portrait orientation, while the second part had to be in landscape orientation.
It took us some time to find the way to do this, and it turned out to be a very handy CSS trick! We found it here.

This is the way to go:

<style>
@page port {size: portrait;}
@page land {size: landscape;}
.portrait {page: port;}
.landscape {page: land;}
</style>

 Once you have this, you simply create 2 divs in your html page and add the class to them:

<div class="portrait">this one is portrait</div>
<div class="landscape">this one is landscape</div>

Here’s a more complete view of how the code should be used in an apex page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<apex:page renderAs="pdf" showheader="false" sidebar="false" controller="[your_controller_name]">
<head>
<style>
@page port {size: portrait;}
@page land {size: landscape;}
.portrait {page: port;}
.landscape {page: land;}
...
[any other styling]
</style>
</head>
<body>
<div class="portrait" style="page-break-after:always;">
this page is printed in portrait orientation.
</div>
<div class="landscape">
this page is printed in landscape orientation.
</div>
</body>
</apex:page>

The page break style on the first div is to make sure that when printing, a new page is always started for the second div. You must make sure to add this, if not, the orientation change will probably fail.

Author: lhe Categories: CRM platforms, Coding, HTML / CSS, Leiv Hendrickx, Salesforce.com Tags: , ,