HTML Email behaving strange in Outlook -


hello have simple html table in email , reason last cell in thead / td not taking bg color coming out white.

i have no idea why happening, happening in outlook. looks fine in gmail, yahoo, icloud , hotmail.

i have fiddle shows correctly figured include 

<table id="responsive" bgcolor="#0057a0" align="center" style="width:100%;max-width:535px;background: #0057a0;">     <thead bgcolor="#0057a0">         <tr bgcolor="#0057a0">             <th width="31%" style="font-weight:normal;background: #0057a0;color: #fff;">&nbsp;</th>             <th width="23%" style="font-weight:normal;background: #0057a0;color: #fff;">level 1</th>             <th width="23%" style="font-weight:normal;background: #0057a0;color: #fff;">level 2</th>             <th width="23%" bgcolor="#0057a0" style="font-weight:normal;background: #0057a0;background: #0057a0 !important;background-color: #0057a0;background-color: #0057a0 !important;color: #fff;">level 3</th>         </tr>     </thead>     <tbody style="background:#fff;color:#0057a0;font-size:14px;">         <tr>             <td style="background:#d1ecf3;font-size:14px;padding: 10px;">yeah buddy</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>         </tr>         <tr>             <td style="background:#d1ecf3;font-size:14px;padding: 10px;">yeppers</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>         </tr>         <tr>             <td style="background:#d1ecf3;font-size:14px;padding: 10px;">yo yo yo</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"></td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"></td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">lipsum</td>         </tr>         <tr>             <td style="background:#d1ecf3;font-size:14px;padding: 10px;">blah blah</td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>             <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>         </tr>     </tbody> </table>

the css have in fiddle. suggestions great!

not sure if related, try removing <thead> , <tbody>, limit possible causes. straight table/tr/td trick in html email.

also, need 6-digit hex colors , unfortunately have declare them in each cell (at least text). bgcolor away declaring in table, changing when needed, in example kinda cheating not zeroing out cellpadding , cellspacing, using gap borders. might not display consistently across clients, lot cleaner code-wise other solutions adding borders every cell.

this should work:

<table id="responsive" bgcolor="#0057a0" align="center" style="width:100%;max-width:535px;">   <tr>       <td bgcolor="#0057a0" align="center" width="31%" style="color:#0057a0;">&nbsp;</td>       <td bgcolor="#0057a0" align="center" width="23%" style="color: #ffffff;">level 1</td>       <td bgcolor="#0057a0" align="center" width="23%" style="color: #ffffff;">level 2</td>       <td bgcolor="#0057a0" align="center" width="23%" bgcolor="#0057a0" style="font-weight:normal; color: #ffffff;">level 3</td>   </tr>   <tr>       <td bgcolor="#d1ecf3" style="font-size:14px; padding: 10px; color:#0057a0;">yeah buddy</td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">lipsum</td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">lipsum</td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">lipsum</td>   </tr>   <tr>       <td bgcolor="#d1ecf3" style="font-size:14px; padding: 10px; color:#0057a0;">yeah buddy</td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>       <td bgcolor="#ffffff" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>   </tr> </table>

you can use valign="middle" on cells vertically center them if needed.


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more