I am making a new html signature for use in Outlook 2010. It looks fine in browsers and most email clients but in Outlook 2010 it renders a bit wrong. As you can see from the first screenshot from Chrome the text aligns to the right of the image, but in the second screen from Outlook it renders below the image. How do I fix this?
Chrome: Chrome http://unihouse.no/images/sig_chrome.PNG
Outlook: Outlook 2010 http://unihouse.no/images/sig_outlook2010.PNG
Ps. I paste the code directly into the Outlook Signature html file without using the inbuilt editor.
<div id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #15345B dotted; font-family: 'Trebuchet MS',helvetica,San-Serif; font-size: 11px; color: #15345B; " >
<a href="http://unihouse.no" title="test.no"><img src="http://unihouse.no/images/arrows3.jpg" alt="Test AS" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
<div style="padding: 6px 0 0 0">
<span style="font-size:11px"><strong style="color: #15345B; letter-spacing: 1px">Test Name</strong>, Unihouse Norge AS</span><br>
<strong style="letter-spacing: 1px">Storkundeansvarlig Østlandet</strong><br>
e-post: <a href="mailto:[email protected]" title="e-post Chris" style="text-decoration:none; border-bottom:1px dotted #15345B;color:#15345B">[email protected] </a> | tlf: +47 123 45 567<br>
Besøksadresse: Tjuvholmen allé 3, 0252 Oslo<br>
Hovedkontor: Innherredsveien 103, 7043 Trondheim<br>
</div>
<div style="clear:both"></div>
</div>
You could use a table instead of floating divs. Try making a table with one row and 2 cells. Place the image in the first cell and the text in the second.
This should force them to be next to each other in any application.
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #15345B dotted; font-family: 'Trebuchet MS',helvetica,San-Serif; font-size: 11px; color: #15345B; " >
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://unihouse.no" title="test.no"><img src="http://unihouse.no/images/arrows3.jpg" alt="Test AS" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size:11px"><strong style="color: #15345B; letter-spacing: 1px">Test Name</strong>, Unihouse Norge AS</span><br>
<strong style="letter-spacing: 1px">Storkundeansvarlig Østlandet</strong><br>
e-post: <a href="mailto:[email protected]" title="e-post Chris" style="text-decoration:none; border-bottom:1px dotted #15345B;color:#15345B">[email protected] </a> | tlf: +47 123 45 567<br>
Besøksadresse: Tjuvholmen allé 3, 0252 Oslo<br>
Hovedkontor: Innherredsveien 103, 7043 Trondheim<br>
</td>
</tr>