html side by side tables in email are forced under in Outlook 2007 and above -


i have run first frustration outlook breaking html emails.

i have container table 640 px wide. in 2 320px tables 1 align left, 1 align right. site side side in email clients except word engined outlook (2007 , up).

this important part. have code make containing table become 320px wide when viewed on mobile phone. forces 2 tables 1 on top of other. works planned mobiles.

but outlook on desktop renders left aligned table, below it renders right hand table below left still aligned right, creating big gap beneath left hand table , big gap above right hand table.

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="en"> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8">     <style>     img      {display:block;}          {text-decoration:none;}     a:hover     {text-decoration: underline !important;}     td.contentblock p {          color:#ffffff;         font-size:16px;         font-family:'helvetica neue',helvetica,arial,sans-serif;         margin-top:0;         margin-bottom:12px;         padding-top:0;         padding-bottom:0;         font-weight:normal;     }     td.contentblock p {          color:#e45808;         text-decoration:none;     }     .heading {         font-size:24px;         font-weight:bold;     }     @media screen , (max-device-width: 480px) {          table[class="table"], td[class="cell"] {               width: 320px !important;          }         td[class="footershow"] {               width: 320px !important;          }         table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {               display: none !important;          }          img[class="divider"] {               height: 1px !important;          }          img[id="header"] {               width: 320px !important;               height: 69px !important;          }          img[id="main"] {               width: 320px !important;               height: 45px !important;          }          img[id="footer"] {               width: 320px !important;               height: 43px !important;          }         p[class="reminder"] {             font-size: 11px !important;         }         span[class="secondary"] {             line-height: 20px !important;             margin-bottom: 15px !important;             font-size: 13px !important;         }     }     </style> </head> <body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">  <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eeeeee"> <tr>     <td bgcolor="#eeeeee" width="100%">      <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">     <tr>         <td width="640" class="cell" style="color:#fff;">          <table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">         <tr>             <td bgcolor="#cc6600" class="contentblock cell" style="color:#ffffff;font-size:16px;font-family:'helvetica neue',helvetica,arial,sans-serif;">             <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">             <tr>                 <td>                 <a href="#" target="_blank" title="#" style="text-decoration:none;color:#fff;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>                 </td>             </tr>             </table>             <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">             <tr>                 <td>                 <a href="#" target="_blank" title="#" style="text-decoration:none;color:#fff;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>                 </td>             </tr>             </table>             </td>         </tr>         </table>         </td>     </tr>     </table>     </td> </tr> </table>                           </body> </html>

if 1 me find way still have 2 side side tables in outlook, still have them re-align 1 under other in mobile phones, appreciative.

the quick answer make widths of inner tables few pixels smaller. stands, outlook adds few pixels in between them causing 320 + (couple pixels) + 320 > 640.

a more accurate way though add mso-table-lspace , mso-table-rspace reduce gap. see this example.


Comments

Post a Comment

Popular posts from this blog

javascript - jquery or ashx not working -

i using ajax file upload control. it creating html: <form action="/pages/handlers/asyncfileuploadhandler.ashx" method="post" enctype="multipart/form-data" target="ajaxuploader-iframe-1397144545"> <input type="hidden" name="type" value="mindvoice"> <input type="file" id="imagefile" style="display: block; width: 80%; margin-right: auto; margin-left: auto;"> </form> and target is: <iframe width="0" height="0" style="display:none;" name="ajaxuploader-iframe-1397144545" id="ajaxuploader-iframe-1397144545"></iframe> the form submitted using .submit() . my ashx handler: <%@ webhandler language="c#" class="asyncfileuploadhandler" %> using system; using system.web; using nettpals.core; public class asyncfileuploadhandler : ihttphandler { public void processre...
Read more

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

i wondering why line used in lucas kanade tracker in opencv: datatype<cv::detail::deriv_type>::depth can explain me? in opencv, depth of mat refers type of data contained in mat 's data buffer. represented integer values correspond given data type. these integers commonly abstracted appropriate macro definition (e.g. uchar data represented macro cv_8u ). cv::datatype type-traits class provides method obtain corresponding integer value without having memorize macro means data type. there few cases user code needs use datatype::depth . more common datatype::type . a simple example shows 1 possible use of datatype::depth : cv::mat uchar_data = cv::mat::ones(3, 3, cv_8uc1); cv::mat float_data; uchar_data.convertto(float_data, cv::datatype<float>::depth); // ^^ equivalently replaced // cv_32f macro float_data.at<float>(0,1) += 0.5f; std::cout << float_data << std::endl;...
Read more

python 3.x - Mapping specific letters onto a list of words -

can please suggest approach write piece of codes automatically maps letter in letter_str onto dic_key (a dict key string type contains dashes match length of words in word_lst)? so, mapping occurs if letter appears in every words in list @ same position no matter how many words in list. if no letter appears @ position words in word list new_dic_key '----'. please see examples below thanks word_lst = ['ague', 'bute', 'byre', 'came', 'case', 'doze'] dic_key = '----' letters_str ='abcdefghijklmnopqrstuvwxyz' new_dic_key = '---e' if word_list = ['bute', 'byre'] new_dic_key = 'b--e' or word_list = ['drek', 'drew', 'dyes'] new_dic_key = 'd-e-' if words in word_list of same length code give want: word_list = ['drek', 'drew', 'dyes'] cols = [] in range(len(word_list[0])): cols.append([]) word in ...
Read more