Autopilot: Custom HTML email template troubleshooting

The styling of my text changes after I type in the Autopilot editor

In order to address this issue, ensure that there are no quotes in the "font-family" CSS attribute value.

In the following INCORRECT example, the font-family is declared with quotes in the value:

The correct way to have this declared is to remove the quotes from the value as follows:

Styling is being lost completely in Gmail

Do not use the HTML special characters (') in lieu of quotes in the inline styling. This could potentially also create other unwanted effects that contain the  declarations.

Example of incorrect way:

The correct way to have this declared is to remove the special HTML characters from the value as follows:

Styling is not being added to my editable elements

Any element with the AP:EDIT attribute added to it should NOT have its styles selected using the selectors reference.

For example, the following CSS declaration will NOT work with AP:EDIT attribute on its element:

This should be replaced with:

I am seeing extra spacing in my template that shouldn't be there

To ensure that email browsers do not add unwanted spacing to text elements, we need to manually reset the margin to 0 in the CSS.

This also applies to unordered and ordered lists (<ul> and <ol> elements).

In this example, we have the following HTML:

Below is an example of when this reset is NOT applied.

There is a lot more unwanted space between the header and the body text.

Upon closer inspection, you will see that the blue bar is the actual <p> tag itself, and the orange bars are the margins added by the email browser by default. By not manually resetting the margin and padding to 0, this will take effect.

To correct this, we will add these CSS properties:

This will prevent browsers from adding their own default margin and paddings for the <p>, <ul>, and <ol> tags.

Here are the results of adding the styling reset.

Upon inspecting the element, you will notice that there is only the blue bar, which is the <p> itself and no orange bars, being the margins. That's because we set them to 0 in the CSS.

You can still set a custom padding or margin after setting them to 0. For example, if you wanted to have a custom top padding of 10px, you would just need to enter "padding-top: 10px;" and it will override the 0 reset.

I'm losing styling of my text that are in <div> elements

Text elements should always be wrapped in a text element such as a <p>, <span>, <h1>, etc, and not just by a <div> element.

For example, this is the INCORRECT way to markup the text content:

This is one of the correct ways to markup this text:

Any valid text tag can be used here such as a <p>, <span>, <h1>, etc.

My editable image styling is lost when I upload a new image to replace it in the editor

Inline styling should not be used for images that will be swapped out for different ones in the editor. They should be directly addressed in the CSS.

Below is an incorrect example. In this example, we have an editable image with the following HTML:

The green box indicates that this image is an editable image that can be edited. The red box indicates that inline styles should not be used for this case. Upon loading the template, the image will be correct, but once the image is replaced with a different one, the inline styles will be lost creating an unwanted effect.

Let's look at what happens when we change the image:

We can see that the image gets overblown above. To solve this, we should instead address this styling we want via CSS like so:

Along with the following fixed HTML:

After this fix, we now get the desired styling after swapping out the image:

My images in Outlook are being enlarged

For some versions of Outlook, the width and height must be declared as properties on the image tag rather than just inline styling.

Below is an example of adding the "width" and "height" as an image attribute to resolve this problem:

My images are not being horizontally centered in Yahoo mail

If images are being centered in non-Yahoo email clients, but not in Yahoo Mail, add the CSS styling property table-layout: fixed; onto its immediate parent <table> element. Also remove the <center> element if present and ensure the parent element has the HTML attribute align="center".

Take the following code snippet for example:

This will work normally for all email clients except for Yahoo Mail. In Yahoo Mail, this is how this code snippet appears:

To fix this, remove the <center> elements, ensure that the <td> element has the HTML attribute align="center", and add the CSS property table-layout: fixed; to the <table> element.

Post-fix:

With the applied changes, Yahoo Mail should now render the image correctly:

I am losing all styling from the <body> tag

Styling should not be placed on the <body> tag. Take this code snippet for example:

If you happen to have styling on the <body> tag, you can create another element below it that will have the same styling as the <body> tag.

Since we are working with emails, we will add a <table> element, along with the necessary <tr> and <td> children elements that wrap our content, and bring over the styles from our <body> tag to the newly created <table> element.

Here is how our code will look like afterwards:

Note that while it's technically possible to have styling on a <body> element, in order to display emails correctly in the browser within the email editor, Autopilot needs to strip out the <body> tag in the email because the browser only recognizes one <body> tag at a time.

Padding is not being honored in some email clients

If padding is not being honored, substitute out the padding with a blank or transparent image with the same defined widths. Take the following snippet for example:

We have padding set that surrounds the text in this particular section which works in most email clients and works in browsers when developing. Although this method is simpler and quicker, it is not full-proof and will not be honored in all email clients.

Here is an example of it not being honored in an email client:

What we can do to full-proof this is to add additional <td> elements with blank images for the left and right sides. Take a look at the modified snippet below:

In the snippet above, we've removed the declared padding completely and added <td> elements housing a blank image to give us the desired spacing that the padding was giving us.

We originally had a padding of 18px on the sides and so we would give a width of 18px with a height of at least 1px on that blank image. The picture above highlights the newly added elements to create the space we desire. (The same would be done for the top and bottom, but within a <tr> one layer above this to follow the proper table format).

Here is the same email client with the <td> elements with blank images: