Outlook 2007 : <multiline> wrong css because font-family:inherit ?

I was fighting for a day to resolve this... without success. Finally I've replaced the <multiline> tag with a <singleline> and all was fine. Is it then a bug from you ? let's see :

The situation :
I want to make a multiline field in a div with bg-color. The text should have different color than the <multiline> in other label... Here's my code :

<!-- css -->
#bg-content { background-color: #45327d; margin-bottom:15px; }

.article-content-without-bg {  color: #000000 !important; font-size: 14px; font-family: Trebuchet MS, Helvetica Neue, Helvetica, Geneva, sans-serif; -webkit-font-smoothing: antialiased; }

.article-content-with-bg {  color: #ffffff !important; font-size: 14px; font-family: Trebuchet MS, Helvetica Neue, Helvetica, Geneva, sans-serif; -webkit-font-smoothing: antialiased; }

<!-- html in the repeater tag-->

<layout label="Without bg color">
<table class="w620" border="0" cellpadding="0" cellspacing="0" width="620"><tbody>
<tr><td class="w620" width="620">    
      <p class="article-content-without-bg" align="center"><multiline label="Content">Add content</multiline></p> 
</td></tr></tbody></table>
</layout>

<layout label="With bg color">
<table class="w620" border="0" cellpadding="0" cellspacing="0" width="620"><tbody>
<tr><td class="w620" width="620">    
    <div id="bg-content">
         <p class="article-content-with-bg" align="center"><multiline label="Content">Add content</multiline></p> 
    </div>
</td></tr></tbody></table>
</layout>

It works fine on Hotmail, Gmail, Yahoo, Thunderbird, etc., except for Outlook2007 who do not seem to apply the right font-family on the <multiline> with bg. Out07 come back to the default font-family when the <div id="bg-content"> tag is present.

When I delete the <div id="bg-content">, everything's fine.
When I replace the <multiline> by a <singleline>, everything's fine.

So when looking in the source code, I found that :
- the <p> tag in the inline css creating by the <multiline> with the <div> has the proprety  : font-family:inherit;
- the <p> tag in the inline css creating by the <multiline> without <div> has the correct font-family propreties

The font-family:inherit; appears only in the Outlook 2007 message source code, not in the webversion source code.

Tricky, hum ?
Any solutions ?

roshodgekiss roshodgekiss, 5 years ago

HI Vlanzoiz3, this is very interesting! I found a blog post on a similar-sounding issue in which font-family declarations don't cascade with <p> tags in Outlook 2007 - I feel the solutions here may do the trick.

Could you kindly try:
- replacing the <p> tags in <p class="article-content-without-bg" and <p class="article-content-with-bg" with <span> tags
- removing <div id="bg-content"> and applying the bg-content class to the surrounding <td>

Thanks Vlanzoiz3! This certainly sounds like a quirk on Outlook's end - let us know how you go :)


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

Hi Ros, thanks for your reply.

I've tried your solutions, but no way. It was always the same problem : the automatic <p> tag generated by the <multiline> tag has always the attribute font-family:inherit... and Outlook07 was the only one to not match the "inherit" to the parent attribute.

Then I try something super-simple that though it never works (because it was so simple !) ... In my embedded css, I targeted the automatic <p> tag... and the magic happens :-)

Finally, here's my simplified code :
check the "p" in the css declaration

<!-- css -->
#bg-content { background-color: #222222; }
.article-content-with-bg p {  color: #ffffff !important; font-size: 14px; font-family: Trebuchet MS; }

<!-- html in the layout tag-->
<table><tr><td>
     <div id="bg-content ">
          <span class="article-content-with-bg">
               <multiline label="Content">Add your content here</multiline>
          </span>
     </div>
</td></tr></table>

Conclusion : always "KISS" (keep it simple, stupid)

roshodgekiss roshodgekiss, 5 years ago

Nice one, thanks for the follow up! Glad it's working out for you now :D


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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098