It is usually a good idea to ask Operations (usually the specific person who pointed out the issue) for the actual HTML they are using. They will usually send you an HTML file by email. Put this somewhere, but not in the folder where our version of the email lives. Then make another copy of it to work on. This way you can always go back and see what you changed. If you really can't figure out what is going on, ask someone else to have a look. Sometimes a fresh set of eyes can spot something quickly.
The first thing to check are the issues we already know about.
1) Make sure the overall outer container table has style="table-layout:fixed;" or if there is no container table, this needs to be on every table that is not nested inside of another table.
2) Link text should have a span tag around it if the color is supposed to be something other than blue (or else Yahoo will turn it blue) for example:
<a href="http://somplace.com"><span style="color:#999999;">Link text</span></a>
3) Image tags need to have style="display:block;" if they are block images or style="display:inline;" if they are inline images.
Firebug can be useful for temporarily turning styles on and off. You can also use it to copy HTML directly out of an email web client like gmail, hotmail, etc. To do this you activate firebug (aka Inspect Element). In the left pane that opens you will see HTML and in the right pane you will see CSS. If you hover over an element in the HTML pane it will highlight in the actual page window. If you right click on an HTML element in the left Firebug pane a menu comes up and includes the options Copy HTML and Copy innerHTML. You can use these to copy problem areas and paste them into dreamweaver. This is sometimes useful in cases where the email client itself may have affected the code that Operations is using.
When an element is selected (you are 'inspecting' it) you can turn off the styles in the right hand pane by putting your cursor to the left of any CSS selector and clicking. A red circle with a slash will appear in that area. You are probably already familiar with this technique. On the off chance that you don't have Firebug installed, you can get it here.
You can use the W3C Markup Validation Service to check an HTML file for issues. There are a few caveats. You won't really be able to make a HTML valid. There are usually tags from Operations that the validator can not handle. Some of our HTML emails also do not have a DOCTYPE, which will cause validation to fail. The validator can still be useful as you can use it to check for broken or improperly nested tags or other issues.
Another good way to use the validator is to copy a block of code that you know is troublesome and paste it into its own HTML document. You can even use a DOCTYPE as this will be a temporary file and using the DOCTYPE could lead you to conclude that that block of code (or that block of code after you have fixed it) is valid and working the way it should.
There is also an email validator called fractal that you can use. You can paste in html and CSS from your email file and it will show you which email clients do or do not support any particular piece of code.
We were all very happy trading in tables (especially nested tables) for CSS when laying out HTML documents but emails still rely on tables. Tables can be a frequent source of email issues when a tag accidentally gets removed, moved or added where it should not be. It may seem daunting to go trough every table and nested table in an email but Dreamweaver can help us out.
By selecting an opening tag (this works on most tags, not just tables) and using ctrl+[ Dreamweaver will select the tag, its closing tag and everything in between. You can then collapse this selection by clicking the little white box just to the right of the line numbers of the selection. It looks like a white square with a minus sign in it. There will be one at the top of the selection and one at the bottom, and they will be connected by a black, vertical line. You can use this technique to make things easier to visualize.
If you can't use this method to make a selection of a tag and its closing tag, or if the block will not collapse, this could be a sign that there is a problem somewhere in that block of code.
If you need to make a new cell or merge two or more existing cells, Dreamweaver has some simple tools that will eliminate the need to figure out which rows or columns will need rowspan or colspan. If you have your cursor in a table cell you will see two buttons in the lower left area of the Properties window. One button is Split Cell. When you hit this button a dialog box will come up asking how you would like to split it. The other button is the Merge Selected Cells button, this button is grayed out unless you have two cells (or an entire row) selected. You can also access these two features by right-clicking (after selecting a cell or cells) and looking under 'Table' in the menu that comes up. The Merge feature will not allow you to merge cells in a way that will break the HTML (remember that every cell must be a rectangle or square).
Nesting is not just an issue concerning tales. Other improperly nested tags can also cause trouble for an email.
To start off with, <font> and <span> tags (and anything else that is not part of a table) need to be inside a <td> or table cell tag. I have seen <font> tags wrapped around <td> tags before and it causes problems.
Bad:
<font size="2"><td> table contents </td></font>
Good:
<td><font size="2"> table contents </font></td>
Apart from that, tags need to be nested within each other or they may potentially break the email. You probably already know this but it is something that appears frequently in our emails and is easy to overlook.
Bad:
<a href="http://someplace.com"><b>Click here, people!</a></b>
Good:
<a href="http://someplace.com"><b>Click here, people!</b></a>
And this applies to font tags, italic tags, span tags, strong tags, etc.
Email clients will pretty much ignore external style sheets and style declared in the <head> tag of the HTML document. You can use inline styles and you can also use the <font> tag. Inline styles can be added to an existing tag (including a font tag).
Background images, especially those set to repeat, can often be the cause of what appear to be breaks in an email. The usual culprit is too much content (too much copy, too many disclosure boxes or images etc.). The possible solutions are to work with the copywriter to remove copy, remove necessary break tags or paragraph tags (or other block elements) or to make the font size smaller (which may not be desirable).
Removing extra empty or redundant tags may not fix the issue but it will make things easier to see and may make it easier to find the issue. Here is a simple example:
<font size="2">Some text,</font><font size="2"> more text in the same sentence.</font>
In this case since both <font> tags are doing the same thing we don't really need to close the font tag and reopen it, so we can take out the tags in the middle:
<font size="2">Some text, more text in the same sentence.</font>
Again, this is something simple, but when there are lots of <font>, <b>, <strong> etc. tags cleaning them up can sometimes help you see things more clearly.
It is not possible to test your fix in the email clients themselves, but after you have reason to believe you have fixed something, its time to send an email back to Operations. If your fix didn't work, the worst thing that will happen is they will tell you so and you'll have some more sleuthing to do.
When you respond to Operations they usually prefer a fixed section of code rather than the whole fixed HTML document. When I email raw HTML to them, I like to indent it and make it a different color than the rest of my email, it makes it easier to see. You should send them the old block of code and the new block of code to replace it. Usually any particular block of code is unique enough that they will be able to find it. Here is an example:
Hi Dan,
Please replace this:
<table border="1" width="300">
<tr>
<td><img src="assets/van.gif width=330 height=50" /></td>
<td>PCH.com</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </td>
<td>Lorem ipsum $10,000,000.00 SuperPrize®!</td>
</tr>
</table>
With this:
<table border="1" width="300">
<tr>
<td><img src="assets/van.gif width=330 height=50" /></td>
<td>PCH.com</td>
</tr>
<tr>
<td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </td>
</tr> </table>
Thanks,
Scott
Outlook has a handy-dandy increase indent button that makes this very easy to do.