Spring Forward Web Design

Build your own Site... Control your own Future!

Breadcrumbs

E NEWSLETTER

7 Solving Formatting Problems

Create a Free E Newsletter Part 7 Solving Formatting and other HTML Problems

In the last article, we tested our Newsletter and found that it did not display well in either the gmail or Yahoo email processors.

In this article, we will review how to fix common formatting problems.

Remember that the Blue line under our Slogan was not displayed well by either the Gmail or Yahoo email processors. This was because the blue line is actually a 5 pixel border placed under the Slogan text. Email processors have problems with borders, margins and padding and a whole bunch of other things. So the first thing we need to do is find the section in the html that is creating this problem and get rid of it.

First, click on SOURCE to view the source code. Here is the code for the table row (tr) that has our slogan in it:

<p> <span style="font-size: 16px;"><span style="color: rgb(51, 51, 153);"><span style="color: rgb(0, 0, 128);"><strong>Working together for a better future.</strong></span></span></span><span style="font-size: 14px;"> </span></p>

</td>

</tr>

There are a couple of problems with this code. First, the line height is only 0 pixels. This is only useful when displaying an image. So that should go.

</td>

</tr>

Also the h2 tags used to have the slogan in them. We pulled the slogan out of h2 because of the blue underline problem. So go to the upper right and fix the inline styling for h2 to remove this section. Here is how it is now:

color:#000077 !important;font-weight:normal;font-size:14px;margin:0;border-bottom:5px solid #0000ff;

After eliminating the border-bottom:5px solid #0000ff, here is how it should read:

color:#000077 !important;font-weight:normal;font-size:14px;margin:0;

Click on APPLY and view the template now:

We still have the blue underline. So click on Source again.

</td>

</tr>

Let’s get rid of the line-height : 0 px at the beginning and the h2 tags at the end;

</td></tr>

Click on APPLY and view the result:

We got rid of the blue underline. But now our header looks pretty plan. One way to solve this problem would be to create another row under the slogan and fill it in with the blue color. To insert another row, place your curser right after the period in the word “future” . Then RIGHT CLICK to open up the TABLE FUNCTIONS. Click on ROW > INSERT ROW AFTER.

Now we can go to the SOURCE html and get this row looking the way we want. Click on SOURCE.

Here is the code for both rows:

<tr>

<p> <span style="font-size: 16px;"><span style="color: rgb(0, 0, 128);"><strong>Working together for a better future.</strong></span></span></p>

</td>

</tr>

<tr>

</tr>

Note that the new row was given the same height as the row above it (15 pixels). We really only want 5 pixels high. Also we want to specify the background color of this row as blue #0000ff.

Here is what the code for this row looks like after these changes:

<tr>

</tr>

Click on apply and view the changes:

This was not what we want. But we are getting close. We need another row above it that is blue and we need to make this row light green... First change the row back ground color to light green: style="background-color: rgb(210, 250, 210);">

Then put your cursor just to the right of the period after the word future and right click to add another row.

Next click on SOURCE and add the blue background color (0, 0, 250) to the new row.

Then place your cursor in the bottom row and right click to delete it. You should also delete the column to the right of Our Community Newsletter. After all of these changes and changing the color of the Newsletter title to (0, 0, 250) BLUE to match the cell under our slogan, here is the final header:

Here is the current html code in case you want to see how it was done, or copy and paste this into your own custom template:

<tbody>

<tr>

<td colspan="3" style="padding: 20px 0px; font-size: 10px; color: rgb(0, 0, 0); margin: auto; text-align: center;" class="hideonline">This email contains graphics, so if you don't see them, {readonline}<a href="http://springforwardwebdesign.com/index.php?option=com_content&view=article&id=89:community-newsletter-spring-2011&catid=47:newsletters&Itemid=104"><strong>view this newsletter in your browser</strong></a>{/readonline}.</td>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<h1 style="text-align: center;"><span style="color: rgb(0, 0, 255);">Our Community Newsletter</span> </h1>

<h3 style="text-align: center;"><span style="color: rgb(0, 0, 255);"><span style="font-size: 20px;">Spring 2011</span></span></h3>

</td>

</tr>

<tr>

<p style="text-align: center;"> <span style="font-size: 16px;"><span style="color: rgb(0, 0, 128);"><strong>Working together for a better future.</strong></span></span></p>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

NEWSLETTER TEST 2

We next will use this improved template to create Newsletter Test 2 and send it to our test list to see if it reads better than Newsletter Test 1. Here are the results of Test 2:

AOL looks good. But it looked good before the changes.

Yahoo now looks good on the community newsletter. The blue line hiding the slogan is now below the slogan.

But Gmail messed up the Header text on community newsletter

The solution to this problem, to prevent the Spring 2011 line form being raised up to the Community Newsletter line is to create another row just below the Community Newsletter row and place Spring 2011 in this new row.

So let’s go back to our template and adjust the HTML: Here is the text for the offending row:

<tr>

<h1 style="text-align: center;"><span style="color: rgb(0, 0, 255);">Our Community Newsletter</span> </h1>

<h3 style="text-align: center;"><span style="color: rgb(0, 0, 255);"><span style="font-size: 20px;">Spring 2011</span></span></h3>

</td>

</tr>

The easiest way to add a new row is to place your cursor to the right of the 2011 and then right click and click on ROW > INSERT ROW AFTER. Then delete Spring 2011 from the top row and type it in to the new row. Then go to SOURCE view and eliminate the height=”71” from both rows.

I have also added another blank row below Spring 2011 to fix a spacing problem. The point is that the best way to keep gmail from moving text where you do not want it is to add new rows and cells and place text inside those rows and cells.

Here is the html for the header after adding these two new rows:

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<h1 style="text-align: center;"><span style="color: rgb(0, 0, 255);">Our Community Newsletter</span> <span style="color: rgb(0, 0, 255);"><span style="font-size: 20px;"><br />

</span></span></h1>

</td>

</tr>

<tr>

<td valign="top" style="text-align: center;"><span style="color: rgb(0, 51, 0);"><strong>Spring 2011 </strong></span></td>

</tr>

<tr>

</tr>

<tr>

<p style="text-align: center;"> <span style="font-size: 16px;"><span style="color: rgb(0, 0, 128);"><strong>Working together for a better future.</strong></span></span></p>

</td>

</tr>

<tr>

</tr>

</tbody>

NEWSLETTER TEST 3A

Save this template and make Newsletter Test 3A using it. Then send it out to your test list. Here is the result for gmail:

It is not perfect. But it will do the job.