HTML Email - style tests for layout issues

email-testing

<style>
	body.align:before{
		content: "Alignment";
	}
	.align td:not([align]),
	.align td:not([valign]){
		border:1px solid red;
	}
	
	body.colspan:before{
		content:"Column Span";
	}
	.colspan td[colspan]{
		border:1px solid green;
	}
	.colspan td[colspan][width]{
		border:1px solid red;
	}
	
	body.img-border:before{
		content:"Image Borders";
	}
	.img-border img:not([border]){
		border:1px solid red;
	}
	body.img-dimensions:before{
		content:"Image Dimensions";
	}
	.img-dimensions img:not([width]),
	.img-dimensions img:not([height]){
		border: 1px solid red;
	}
	
	body.links:before{
		content:"Links";
	}
	.links a:not([target]){
		background:red;
		border:1px solid red;
	}
	
	body.nesting:before{ content: "Table nesting"; }
	.nesting table table table table { border: 1px solid red; }
	
	body.width:before{
		content:"Cell Width";
	}
	.width td:not([width]):not([colspan]),
	.width table:not([width]){
		border: 1px solid red;
	}
</style>

jQ-tests

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function(){
			$('<p>').html('Width').prependTo('body');
			
			$('tr').each(function(){
					$(this).children('td').each(function(i){
						var $this = $(this);
						
						if(!$this.attr('colspan') && !($this.width() == $this.attr("width"))){
							console.log("width:", $this.width(), " attr:", $this.attr("width"));
							console.log(this);
							
							$(this).css("outline", "1px solid red");
						}
					})
				})
		});
	</script>

Either download and link the css file, or copy the styles and place them in a style tag in the header of the HTML email. Activate tests by adding classes to the body tag.
Don't forget to remove the link/styles and any classes from the body when you are done testing.