Tekst naast afbeelding in handtekening verplaatst zich

[Mini Poeper]

Als handtekening in mail gebruik ik als ondertekening een standaard handtekening.

Deze heb ik gemaakt in een *.htm bestand en plaats deze in de map 'Handtekeningen'.
Zowel Outlook als Thunderbird kunnen hiermee omgaan. Echter de handtekening zoals ik nu gemaakt heb wordt door Outlook niet goed weergegeven, wel door Thunderbird. Browser IE geeft 'm wel goed weer.

Drie regels tekst naast de afbeelding. In Outlook komt de eerste regel ernaast onder te staan en de overige twee regels komen eronder. Iets in de flow gaat dus niet goed...

code:

<div id="sig" style="line-height: 14px; font-family: arial; font-size: 13px;">
<p>Kind regards,<br />
Met vriendelijke groet,<br />
Mit freundlichen Grüßen</p>
<p style="line-height: 16px; font-size: 16px;"><i>Voornaam Achternaam</i></p>
<p style="line-height: 17px; font-size: 11px; color: #999; border-top: 2px #999 solid; padding: 8px 8px 0 8px;">
<img src="http://ic.tweakimg.net/usericons/158259/icon1.png" alt="Bedrijfsnaam" style="float: left; padding: 2px 6px 0 0;" width="70" height="51">
<strong style="font-size: 12px; color: #777;">Bedrijfsnaam</strong> activiteiten<br />
[phone] | [phone]<br />
Volg ons nu ook op Twitter! <a href="http://twitter.com"><img src="http://www.brelson.com/img/twitter-icon-14x14.png" border="0" width="11" height="11"></a></p>
<p style="line-height: 9px; font-size: 9px; color: #999; border-bottom: 2px #999 solid; padding: 0 8px 8px 8px;">
This e-mail and any attachments are subject to a disclaimer which is included on our website.<br />
Op dit e-mailbericht en bijbehorende attachments is een disclaimer van toepassing, die is opgenomen op onze website.<br />
Diese E-Mail und jegliche Anhänge unterliegen einem Haftungsausschluss, welcher auf unserer Website zu finden ist.<br /></p>
</div>

Als afbeelding heb ik mijn tweakers avatar gebruikt en voor twitter een icoontje dat ik op Google tegenkwam.
In het origineel staan deze op mijn (online) hostingserver.

Bovenstaand heb ik in een *.htm bestand verwerkt en in Zip verpakt; -klik- om te downloaden.

[Roady81]

Een float element wordt niet ondersteund in Outlook.
Zie; MSDN: Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Meerdere mail clients (zeker web based) ondersteunen niet alle HTML en CSS elementen. Het beste kun je je beperken tot de HTML4 strict syntax ipv gebruik te maken van CSS en de XHTM syntax. Like it or no, e-mail design is nu eenmaal niet hetzelfde als web design

In jouw geval kun je je float element vervangen door een tabel en border="0" gebruiken.

[Mini Poeper]

Of kan ik beter helemaal geen afbeeldingen gebruiken?
Wat is wijsheid en gebruikelijk?

[ Voor 10% gewijzigd door Mini Poeper op 22-03-2011 13:55 ]

[Vince22]

Ik heb hem als volgt met een afbeelding die ik in dezelfde map heb staan:

<DIV align=left><FONT size=2 face=Tahoma></FONT>&nbsp;</DIV>
<MARQUEE style="WIDTH: 200px; HEIGHT: 57px" id=MARQUEE1 direction=down height=5 behavior=slide loop=1 scrollDelay=10 border="0"><FONT color=#808080 size=4 face=Arial>Naam</FONT></MARQUEE></B></FONT><BR>
<MARQUEE style="WIDTH: 200px; HEIGHT: 17px" id=MARQUEE2 height=5 behavior=slide loop=1 scrollDelay=10 border="0"><B><FONT color=#808080 size=1 face=Arial>Functie</FONT></B></MARQUEE><br>
<img src="plaatje.jpg"/>
<MARQUEE style="WIDTH: 300px; HEIGHT: 70px" id=MARQUEE3 direction=up height=3 behavior=slide loop=1 scrollDelay=80 border="0">
<DIV><B><FONT color=#808080 size=1 face=Arial></FONT></B>&nbsp;</DIV>
<DIV><B><FONT color=#808080 size=1 face=Arial>Postbus  - Postcode - Plaats</FONT></B></DIV>
<DIV><B><FONT color=#808080 size=1 face=Arial>Tel: 0XXX-XXXXXX</FONT></B></DIV>
<DIV><B><FONT color=#808080 size=1 face=Arial>Fax: 0XXX-XXXXXX<BR><A href="[e-mail]">Email: [e-mail]</A></FONT></B></DIV></MARQUEE></FONT><BR>

Dan beweegt ie ook nog mooi. Probeer maar es!

[ Voor 9% gewijzigd door Vince22 op 22-03-2011 14:02 ]

[Roady81]

Mini Poeper schreef op dinsdag 22 maart 2011 @ 13:53:
Of kan ik beter helemaal geen afbeeldingen gebruiken?
Wat is wijsheid en gebruikelijk?

Een afbeelding kan geen kwaad. Zolang je het inderdaad op je eigen web server zet en niet toevoegt aan iedere mail, maak je de mails ook niet onnodig groot.

Zorg er wel voor dat je ook een Plain Text variant hebt van je handtekening (zelfde naam handtekening, maar dan een beetje aangepast en opgeslagen in een txt-file). Plaatjes en opmaak zijn natuurlijk niet aanwezig in een Plain Text mailtje en dan ziet je handtekening er meestal niet uit of ontbreekt er informatie welke anders in een plaatje stond. Om het volledig te maken kun je ook een rtf-versie nog maken.

Zaken zoals "marquee" kun je ook maar beter achterwege laten in een handtekening. Een aantal redenen hiervoor; wordt ook niet ondersteund door iedere client, de aandacht moet op de content van je mail en niet je handtekening, meestal is de animatie toch al voorbij voordat het einde van het bericht gelezen wordt (en continue bewegen stoort bij het lezen), het wordt eerder als kinderachtig dan als professioneel ervaren.