User has developed their own marketing template with complex CSS (cascading style sheets). When user opens the email sent from the campaign, the Unsubscribe Footer Text shows on top followed by the contents of the template. This is only happening on emails sent via Campaigns.
This behavior is the result of using floating DIV or SPAN tags in combination with either inline or external CSS files. Check the code to see a setup similar below as the first clue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Example 1: Using Span Tags with CSS</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<link rel="stylesheet" type="text/css" href="http://SomeDomain.Com/AstyleSheet.CSS ">
</HEAD>
<BODY>
<P>
<SPAN CLASS=Style1>A line of text that has the Style 1 CSS applied to it.</SPAN>
</P>
</HTML>
Notice from this example of a very basic HTML which demonstrates this behavior that the line 3rd from last shows as:
<SPAN CLASS=Style1>A line of text that has the Style 1 CSS applied to it</SPAN>
This means that a CSS property called Style1 has been applied to a container SPAN for this particular block of texts.
Using SPAN or DIV is a commonly used best practice among web developers and web designers to allow texts in HTML websites to flow properly as well as position them on pages.
Using SPAN or DIV tags however have one side effect, text blocks placed inside SPAN and DIV tags when combined with CSS makes the text "float" from the page.
In effect, the Unsubscribe Footer Text automatically attached in Campaigns will move to the top of the email when received because technically, there is no text inside the message, pushing the footer up, as the text block or other contents are floating on the page
To avoid this from happening, use tables instead of SPAN tags. If the block of code above were to be rewritten to make use of tables, the code would now look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Example 2: Using Table Tags with CSS</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<link rel="stylesheet" type="text/css" href="http://SomeDomain.Com/AstyleSheet.CSS ">
</HEAD>
<BODY>
<P>
<table>
<tr>
<td class="Style1"> A line of text that has the Style 1 CSS applied to it.</td>
</tr>
</table>
</P>
</HTML>
Though SPAN tags allow more flexibility when used with CSS, most mail readers and web mail providers do not display SPAN tags combined with CSS well, which makes it better to use tables specifically for Marketing Campaigns in NetSuite.
No comments:
Post a Comment