css - Email HTML signature adds blank HTML elements on web clients, causing layout to break -
i've been trying fix few hours already, , can't seem find problem.
i have html email signature has wrap on low resolution devices.
this mockup how should on large-screen devices: 
and mockup how should on small-screen devices: 
this markup:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <table width="100%"> <tr> <td> <!-- text cell --> <table align=left width=160> <tr> <td> <p> <span style='font-size:12.0pt;font-family:"times new roman","serif"; mso-fareast-font-family:"times new roman"'>sep</span> </p> </td> </tr> </table> <!-- text cell --> <table align=left width=160> <tr> <td> <p> <span style='font-size:12.0pt;font-family:"times new roman","serif"; mso-fareast-font-family:"times new roman"'>ult</span> </p> </td> </tr> </table> <!-- text cell --> <table align=left width=160> <tr> <td> <p> <span style='font-size:12.0pt;font-family:"times new roman","serif"; mso-fareast-font-family:"times new roman"'>tur</span> </p> </td> </tr> </table> <!-- text cell --> <table align=left width=160> <tr> <td> <p> <span style='font-size:12.0pt;font-family:"times new roman","serif"; mso-fareast-font-family:"times new roman"'>ura</span> </p> </td> </tr> </table> </td> </tr> </table> </body> </html> the problem web clients. reason, there's html element appended next each 1 of 4 tables: 
and these results:
ms outlook 2007 (properly displayed): 
apple gmail client (properly displayed , wrapped, since it's small-resolution screen): 
outlook web (there's html element breaks layout, details in pic): 
gmail web (somehow similar outlook web): 
i'd mention tested these litmus , looked good. i'm not sure why things different in these let's "real-world" situations.
could related process of putting html signature:
- open html page containing signature
- select content within page (ctrl+a)
- copy content (ctrl+c)
- open ms outlook 2007
- go tools -> options -> mail format -> signatures
- new signature -> paste content textarea -> save newly created signature.
i'm pretty confident asking can not done in outlook '07 in signature.
this because outlook '07/'10/'13 use microsoft word engine , add own junk after send (the p msonormal tags). because added after send, can not use inline css. in html email design, designers add styles style tag 0 out these unwanted tags in anticipation of outlook doing it's thing. wouldn't work because are using signature only. can try including <style> tag in signature html, i'm doubtful work.
the best suggestion have mimic kind of behavior . hack way, may option have "floating" if sending outlook '07. example:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> text 1 text 2 text 3 text 4 </td> </tr> </table> something might work, (definitely lot neater) haven't tested it:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <span style="width:150px;">text 1</span> <span style="width:150px;">text 2</span> <span style="width:150px;">text 3</span> <span style="width:150px;">text 4</span> </td> </tr> </table>
Comments
Post a Comment