Outlook Email Signature - header? - html

Question

I've been trying to get a particular design to work for an email signature without any luck, I have a feeling it's not possible, but perhaps someone has a solution.
The issue is that there is a small image that needs to be above the first line one types on. i.e.
[image]
[type here]
[signature details - e.g. phone no.]
If I make it normally, outlook always inserts a line break before the image and places the cursor there, I can't get the cursor to start after the image without clicking there (e.g. by pressing tab after typing subject).
I've tried making the image a background image of a div/span/table, I've tried using css to set the margin-top to a negative number, but the problem seems to stem from the fact that outlook inserts the signature after the div it creates for typing in.
Does anyone have a suggestion or is my task futile?

Answer 1

Which version of Outlook?
Try adding this to the image:
style="display:block;"
P.S - Backgrounds don't work in some versions of Outlook, unless you do some sort of conditional statements, you need to test how your e-mail renders in Microsoft Word (MSO rendering engine).
http://www.campaignmonitor.com/css/

Answer 2

You need to set on body a background-image and padding-top equal to the height of the image.
I did something similar a while ago to fix the "cursor problem" you mentioned. I don't remember which version of Outlook it was for, but nobody ever reported any problems with it.
As Kyle R mentioned, you should definitely test how your email renders with different clients.

Answer 3

An email can be a multipart message. This means the body can have multiple encodings. Each encoding comes with its own header:
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary=frontier
This is a message with multiple parts in MIME format.
--frontier
Content-Type: text/plain
This is the body of the message.
--frontier
Content-Type: application/octet-stream
Content-Transfer-Encoding: base64
PGh0bWw+CiAgPGhlYWQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyB0aGUg
Ym9keSBvZiB0aGUgbWVzc2FnZS48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==
--frontier--
(example from here)
In most clients the default encoding is Content-Type: text/plain. Adding an image however switches the encoding to eg. base64.
Each new encodings starts on a new line. I assume this is causing you the trouble, since this automatically puts your text/cursor below the image.
One way to get around this would be to encode the entire message as html - the image as well as the text, using an img tag, inline.
Clicking next to the image lets you do this unknowingly, I assume.