Geek Answers Handbook

Td stacking without css

Our CRM allows us to send automated emails to our customers using our software. Things like purchase receipts, etc. Although they offer HTML editing of emails, they are very limited and we cannot use any CSS.

As far as their style guide allows, it seems that all HTML and some inline styles, for example:

<span style="color:#ffffff">white</span> <div style="color:#ffffff"> <img src="dickbutt.gif" style="width:30px;height:20px">

... everything is in accordance with the manual. However, no other CSS or CSS links are allowed, including:

 <link rel="stylesheet" href="/stylesheet.css" type="text/css">

or

 <style type="text/css"> @import "/stylesheet.css"; </style>

or

 <style type="text/css"> body { color:green; } </style>

To add insult to injury, and I had to include this above, everything above the <body> (and including the body tag itself) is deleted when the file is saved in its built-in HTML editor. They have automatic code modification scripts that refer to the "approved" code in their style guide and delete any remaining code. So what have I left? Not at all. Mostly from opening <table> to closing </table> . They even highlight </body> and </html> .

With the rest of the code, I cannot use @media at all or allow any <td> styling. So, are they alternative ways to link to a stylesheet that you know about? ... a method that allows stacking without access to CSS? I am basically looking for a way for these letters to respond to the limitations described above.

I uploaded the style guide in JSfiddle: https://jsfiddle.net/Lxfqus7f

+6
source share
3 answers

Yes, yes, 100 times, yes. Everyone who has ever created an email template had the same complaints. Email Design - This is web design around 1999. First of all, just forget CSS links, just embed everything you can and don’t worry with @media tags, forget that they even exist.

Table design
Think of <table> as a table: <tr> as a table row and <td> as a table cell. Instead of stacking, TDs use nesting tables. The new table can go into TD and in the style of a nesting doll in the style of a nesting doll, you can make any layout you want.

 <table> <tr> <td> <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </td> <td>5</td> </tr> </table>

The above works fine.

Responsive letters
Response words and email do not usually go together. Which email clients are very limited, but there are ways around this. How to set the width of the main table to 100% and the presence of two TDs on each side. Like this:

 <table width="100%" cellspacing="0" cellpadding="0"> <tr height="500px" valign="top"> <td width="*" bgcolor="#00FFFF"> </td> <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> <td width="*" bgcolor="#00FFFF"> </td> </tr> </table>

Here are some examples in JSfiddle.

http://jsfiddle.net/e8r9ky4x/

+1
source

It looks like your style guide uses some built-in styles:

  <p>Our studio is <span style="color:purple">purple.</span></p> Define sections of text that require different HTML <div> <div style="color:#FC8301"> <h3>This title.</h3> <p>This is sentence.</p> </div>

Since you automatically generate emails anyway, why not just let this slide declare your styles in variables and use them where necessary?

Do style tags share all tags? Could you just put the style hidden when creating the TD?

 <td><style>/*rules are for quitters!*/</style>Stuff</td>
0
source

Using a style tag in the body may not be the best to use and may even cause vomiting for many web developers, but it’s possible to use in email .

I would strongly recommend that you not use it this way outside the cases as you indicated, and would recommend a HEAVY test for all clients, as it can sometimes lead to errors.

I would like your inline style to do most of the hard work and just use body style tags for items that cannot be done in any other way.

Below are some useful resources in the HTML response email made to work with GMAIL APP (which almost completely erases the style tag) and should help you create a basic level for the best way to create your emails.

Hybrid Coding Approach - http://labs.actionrocket.co/the-hybrid-coding-approach

Hybrid Coding Reduction - http://labs.actionrocket.co/the-hybrid-coding-approach-2

Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

0
source

More articles:


All Articles