DarkxPunk Posted February 10, 2017 Share Posted February 10, 2017 (edited) Hi there, Okay so this will sound incredibly confusing, but lets give it a try. I made an email signature a while back for a customer, it functioned correctly. However I wanted to optimize and improve it for better appearances on mobile. I rewrote it, brought it into Apple Mail, and everything seems to break it. Adding text, attachments, replying, etc. I couldn't figure out why my new signature was not functioning like the old. Then I noticed this on the old signature: The purple is a highlight of some sort of text line... But I can't figure out where it is coming from in the code. On I went, rewriting the email signature line by line to re create this text line... I couldn't do it. I absolutely can't figure out where this is coming from, but I am convinced this line is why the old signature works and the new one does not. It is providing some sort of separation to the email signature that prevents other elements from causing it to break. I have tried simulating it, recreating it, no luck... Ill attach the code, but if someone can find out what this is you will keep me from going insane. (Note I thought it was the margins too, however in the rewrite it does not create this text line) <style type="text/css" scoped> @media only screen and (max-device-width: 414px) { table[class=wrap] { width: 230px !important; } table[class=separator] { border-right: 0 !important; border-bottom: 1px solid #dbdbdb !important; } td[class=spacer-top] { display: none !important; } td[class=spacer-bottom] { font-size: 10px !important; } } @media only screen and (max-width: 470px) { table[class=wrap] { width: 230px !important; } table[class=separator] { border-right: 0 !important; border-bottom: 1px solid #dbdbdb !important; } td[class=spacer-top] { display: none !important; } td[class=spacer-bottom] { font-size: 10px !important; } } </style> <table class="wrap" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; border: 0; border-collapse: collapse; font-size: 0; text-align: left;"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: 80px; height: 80px; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;"> <tr> <td> <img src="" alt="" width="110" height="81" name="logo" alt="Logo"/> </td> </tr> </table> <table class="separator" border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-right: 1px solid #dbdbdb; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;"> <tr> <td colspan="2" style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">First Last</td> </tr> <tr> <td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Direct:</th> <td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="tel:1234567890">1234567890</a></td> </tr> <tr> <td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; font-weight: normal; text-align: left; color: #616161">Fax:</th> <td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="tel:1234567890">1234567890</a></td> </tr> <tr> <td style="padding: 0 5px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Email:</th> <td style="padding: 0 10px 0 0; font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="mailto:abc@xyz.com">abc@xyz.com</a></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" valign="middle" style="margin: 5px; padding: 0; border: 0; border-collapse: collapse; width: auto; height: auto; font-size: 0; display: inline-block; vertical-align: middle; text-align: left; zoom: 1; *display: inline;"> <tr> <td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161">Company Name</td> </tr> <tr> <td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="">Line 1<br/>Line 2<br/>Line 3</a></td> </tr> <tr> <td style="font-family: sans-serif; font-size: 13px; text-align: left; color: #616161"><a style=" font-size: 13px; text-decoration: none; color: #616161" href="http://www.google.com/">www.google.com</a></td> </tr> </table> </td> </tr> </table> Thank you for all your help. If I spend another 6h on this like I have been I am going to go nuts... Edited February 10, 2017 by DarkxPunk Link to comment Share on other sites More sharing options...
Sunamena Posted February 15, 2017 Share Posted February 15, 2017 There is no CSS for a screen larger than 470 pixels if i see this correctly.You are also working with inline css and obsolete table sub tags such as border="0" cellspacing="0" cellpadding="0". CSS gets read like this:Use inline CSSElse Use the css in the head Else Use the css in the linked file.Maybe that is what is creating the conflict? Link to comment Share on other sites More sharing options...
DarkxPunk Posted February 15, 2017 Author Share Posted February 15, 2017 I have played with the different styling methods just to be sure, I can't replicate. However this is an email signature so I need to keep everything inline and cover old styles for older email clients. Thanks for the tips, if you have any further direction it's appreciate. Link to comment Share on other sites More sharing options...
Ingolme Posted February 15, 2017 Share Posted February 15, 2017 Coding for emails is very different than coding for a website. You have to use old attributes and inline CSS to get it to render properly in email clients. Link to comment Share on other sites More sharing options...
DarkxPunk Posted February 17, 2017 Author Share Posted February 17, 2017 So surprise surprise I finally figure it out on my own, and I am actually surprised at what it is. So I kinda was wrong kinda was right about its not being the margins... It isn't the margins, but the margins cause it to appear... Its in fact cellpadding/padding... Now logically this shouldn't make sense but welcome to ancient html logic. Even though I have cellpadding set to 0, by having padding on the TD it turns it back on... regardless where the padding is... Then the margins is extending the open area between the cells and thus this line appears... And this line causes content to break below it if you try to place text beside it. It is messed up and makes no sense, but it works! Now since I have this understanding I decided to redesign it and post my optimized version here, open for any suggestions: <style type="text/css" scoped> @media only screen and (max-width: 500px) { table { display: table !important; padding: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } table table { padding: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } table[class=logo] { padding: 0 !important; padding-bottom: 5px !important; } table[class=spacer] { padding: 0 !important; border: 0 !important; border-top: 1px solid #dbdbdb !important; width: 57px !important; height: 1px !important; } } </style> <table border="0" width="100%" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-top: 10px;padding-right: 1px;padding-bottom:10px;width: 100%;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;"> <tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;padding-top: 1px;padding-right: 1px;padding-bottom: 1px;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <table class="logo" border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;"> <tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: 110px;height: 81px;vertical-align: middle;white-space: nowrap;"> <img src="" name="Company" alt="Company Logo" width="110" height="81" style="margin: 0;border: 0;padding: 0;width: 110px;height: 81px;vertical-align: middle;white-space: nowrap;" /> </td> </tr> </tbody> </table> <table border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-left: 5px;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;"> <tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> First Name Last Name Title </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <span style="margin: 0;padding: 0;padding-right: 1px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Direct:</span> <a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <span style="margin: 0;padding: 0;padding-right: 13px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Cell:</span> <a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <span style="margin: 0;padding: 0;padding-right: 14px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Fax:</span> <a href="tel:1234567890" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">(123) 456-7890</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <span style="margin: 0;padding: 0;padding-right: 3px;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Email:</span> <a href="mailto:abc@xyz.com" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">abc@xyz.com</a> </td> </tr> </tbody> </table> <table class="spacer" border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;border-right: 1px solid #dbdbdb;padding: 0;width: 1px;height: 57px;display: inline-table;vertical-align: middle;white-space: nowrap;"> <tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td style="margin: 0;border: 0;padding: 0;width: 0;height: 0;" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> </td> </tr> </tbody> </table> <table border="0" width="auto" align="center" cellpadding="0" cellspacing="0" style="margin: 0;border: 0;padding: 0;padding-left: 5px;padding-right: 5px;width: auto;height: auto;display: inline-table;vertical-align: middle;white-space: nowrap;"> <tbody align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> Company Name </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 1</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 2</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <a href="" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">Address Line 3</a> </td> </tr> <tr align="left" valign="middle" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;vertical-align: middle;white-space: nowrap;"> <td align="left" nowrap="nowrap" style="margin: 0;border: 0;padding: 0;width: auto;height: auto;text-align: left;vertical-align: middle;white-space: nowrap;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;"> <a href="http://www.xyz.com/" style="margin: 0;padding: 0;border: 0;display: inline;font-family: sans-serif !important;font-size: 13px !important;color: #616161 !important;text-decoration: none !important;">www.xyz.com</a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now