Anyone else use dropcaps?

Hello Campaign Monitor Community,

I've been working on a festive newsletter for a client, and added a spark of elegance using a dropcap in the first paragraph. The solution has come together nicely, but unsurprisingly won't work in Outlook 2007.

It's been tested (manually) across Gmail, Hotmail, Yahoo, and Outlook, and yet again Outlook's awkward mechanics are the only thing stopping this from functioning as an aesthetic addition.

Please see the solution below (image has been hosted):

<table width="238" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td width="238">
        <img src="http://clients.aaunel.com/Letter_A.jpg" align="left" style="text-align:left;" alt="A"><p style="color:#515151; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.4em; margin:0; padding-bottom:0.5em;">s our minds move towards Christmas, our designers have once again conjured a glittering array of handmade silver decorations to add a sparkle to any Christmas tree.</p>
    </td>
    </tr>
</table>

The solution works properly, with the letter image lining up to create a dropcap effect in the tested email clients. But Outlook positions the image above the text (does not wrap text).

Anyone have any ideas?

Thanks in advance,
Yann

roshodgekiss roshodgekiss, 6 years ago

Hi Yann, it's always Outlook that causes these niggles, hey? Unfortunately, floats don't work in Outlook either (which is usually how drop caps are formatted), so a rather inelegant solution would be to potentially use tables to force the wrapping effect of paragraph text around the large 'A' (ie. the 'A' would go into a separate cell from the para text).


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 6 years ago

Here you go:

<table width="238" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td width="238">
       <img src="http://clients.aaunel.com/Letter_A.jpg" align="left" height="32" width="32" border="0" style="display:block;" /><div align="left" style="color:#515151; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:16px;">s our minds move towards Christmas, our designers have once again conjured a glittering array of handmade silver decorations to add a sparkle to any Christmas tree.</div>
    </td>
    </tr>
</table>

Brian Thies
Professional Email Developer
Thies Publishing
fantasticthinking fantasticthinking, 6 years ago

Hi guys,

Thanks for your help. I didn't realise <div>'s could do such magic.
It now appears to be working!

Yann


Fantastic Thinking

From one-off email campaigns to global website rollouts, we have the knowledge and expertise to help you plan and deliver your online brand ambitions.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098