html - Email images not lining up out look 2007/10 vs everything else -

-

i've checked out few posts, , tried them. didn't work. may become decision , tell clients is, don't want come that.

so after testing litmus, main issue borders(left , right) vs top , bottom image not lining correctly on outbook 2007/10 vs else.

 <body>  <style type="text/css"> body{   color:#415b7c;   font-family:helvetica, arial, sans-serif;   font-size:12px;    padding:0;   margin:0;  }  table {border-collapse: collapse;} </style> <table width="100%" bgcolor="#ffffff"> <tr>   <td><!-- header -->     <table width="600" align="center" cellpadding="0" cellspacing="0">         <tr valign="bottom">           <td>               <table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">                 <tr><td>                   <img src="http://wearehmc.com/emailtemp/vsac/top.png" width="600" style="display:block">                 </td></tr>               </table>            </td>         </tr>             <tr valign="top">           <td>             <table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">               <tr>                  <td>                     client log                 </td>                 <td>                   <table cellpadding="10" style="color:#576276;">                     <tr>                       <td>                         <p style="font-weight:bold">                           text                         </p>                         <p>                           text                         </p>                       </td>                     </tr>                    </table>                  </td>                 <td>                     client logo                 </td>                </tr>             </table>            </td>         </tr>           <tr>           <td>           <table width="600" align="left" cellpadding="0" cellspacing="0">              <tr>                 <td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">                   <table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">                     <tr>                       <td style="color:#ffffff; font-size:24px; ">                         text                       </td>                     </tr>                   </table>                       </td>             </tr>         <tr>           <td>               <table width="600" align="left" cellpadding="0" cellspacing="0">                   <tr><td>                   <img src="http://wearehmc.com/emailtemp/vsac/bottom.png" width="600" style="display:block">                 </td></tr>               </table>            </td>         </tr>            </table>    </td> </tr></table>

i've taken out client copy , logos.

as i've said may come down decision of not letting line in outlook 2007/10, while letting work in others.

so if has suggestions, helpful.

for outlook (and gmail) need specify border="0" on images.

<img src="/" width="" height="" alt="" border="0" style="display:block">

this should on every image use in email, spacers. (in fact, on spacers, since create unwanted empty space without content)

also, outlook has trouble rendering cell-padding , spacing (2007 , 2010 both use microsoft word rendering engine, i'll let imagine how great render html-emails).

so should using nested tables instead of cell-padding, spacer images create inner spaces of sections.

oh, , see styling not inline. cause problems html-email stability. (gmail strip every styling not inline, #000000 color on links (use #000001 instead)).

oh also. border styles , colors. not display everywhere. solution again nested tables. bgcolor , 1 / 2px width spacers give illusion of borders.

hope helps. (i know sounds lot of errors in html-email, once hang of coding worst possible mail clients in mind, it'll become second nature! ;) )


Comments

Post a Comment

Popular posts from this blog

node.js - ldapjs - write after end error -

-
i have created authentication service using following code in node.js , ldapjs. var when = require ('when'); var authenticationerror = require('../errors/authenticationerror'); var sessionmanagerservice = require('./sessionmanagerservice'); var ldap = require('ldapjs'); var client = ldap.createclient({ url: 'ldaps://ad.mycompany.com:636', tlsoptions: {'rejectunauthorized': false} }); module.exports = { signin: function (email, password) { return this.ldapbind(email, password).then( function () { return sessionmanagerservice.createsessionhash({email: email}); } ); }, ldapbind: function (email, password) { var deferred = when.defer(); client.bind(email, password, function(err) { if (err) { deferred.reject (new authenticationerror('invalid username and/or password!', 'authentication.signin.error')...
Read more

DOM Manipulation in Wordpress (and elsewhere) using php -

-
DOM Manipulation in Wordpress (and elsewhere) using php - i'm quite new dom manipulation world , head start in order avoid mutual errors. i looking efficient way manipulate content generated wordpress using php. @ moment using simple html dom seems work fine. found domdocument , few others , helpfull if cleared out 1 faster, improve or @ to the lowest degree generate less errors in case of bad markup. also on side can explain syntax (instead of $html @$html) thank much php wordpress domdocument simple-html-dom
Read more

ios - UICollectionView Self Sizing Cells with Auto Layout -

-
Image
i'm trying self sizing uicollectionviewcells working auto layout, can't seem cells size content. i'm having trouble understanding how cell's size updated contents of what's inside cell's contentview. here's setup i've tried: custom uicollectionviewcell uitextview in contentview. scrolling uitextview disabled. the contentview's horizontal constraint is: "h:|[_textview(320)]", i.e. uitextview pinned left of cell explicit width of 320. the contentview's vertical constraint is: "v:|-0-[_textview]", i.e. uitextview pinned top of cell. the uitextview has height constraint set constant uitextview reports fit text. here's looks cell background set red, , uitextview background set blue: i put project i've been playing on github here . updated ios 9 after seeing github solution break under ios 9 got time investigate issue fully. have updated repo include several examples of different configurations s...
Read more