If you have worked on creating HTML e-mails, you know how frustrating and time consuming it can be.
Not all browsers (and e-mail clients) are created equal, so it's very hard to get stuff to look the same in all of them.
I was editing an e-mail the other day and sure enough, it looked great in one browser but completely messed up on the other.
While reviewing the HTML in Chrome with the Developer toolbar (F12), I noticed a couple of interesting things:
1. The Elements tab does not display MY code. It displays Chrome's rendering which presumably fixes some inconsistencies and most importantly ADDS consistency by tweaking your HTML slightly.
2. The styles tab displays a box at the bottom with a drawing representing the ACTUAL size, margin and padding of the selected object. Notice I said ACTUAL, not the HTML/CSS defined values.
So, armed with these two things, I did the following:
1. Made sure I got it looking great on Chrome.
2. Copied the source from the Elements tab and replaced my source (right click on the HTML node and select "Copy as HTML"). This effectively gives me cleaner, Google-sanitized HTML code.
3. Used the little Styles tab to get the ACTUAL height, width, margin and padding of my objects. I then drew a little diagram on paper to make sure the numbers made sense (sometimes you put a table with 500 width and include a 520 width TD in it, lol). I took all the ACTUAL values and replaced my ORIGINAL values. For instance, if I had declared a width of 500px for a table, but the actual value was 495px and the table looked great, I replaced the 500px with 495px on my document.
Needless to say, it worked like a charm.
Granted, this is not going to fix all inconsistencies among browsers/clients. Some issues require more complex workarounds but this will take you most of the way.
I also know there are tools out there that can do this for you. This is just a quick, free way to get your HTML e-mails displaying properly (for the most part).