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, 4 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, 4 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, 4 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

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