Category: HTML

HTML emails and getting all you styles in-line with a free online tool

If you have had to put together any html email templates then you know what a pain it is getting things right for all the various email clients out there. especially as Google’s Gmail has a nasty habit of stripping all the CSS goodness from html emails leaving them look not how you intended.

The best advice is to make sure all your styling is inline. This can be a pain to manage if you need to design multiple templates. Thanks to a very neat facility provided by the team at Campaign Monitor you can design your emails using good CSS principle using styles and classes.

When you want to make the final HTML with all your styles in-line, use the free online ‘CSS Inliner’ tool by Campaign Monitor at http://inliner.cm/

HTML Placeholder not working in IE9 and earlier!!

Recently found this very useful jQuery plugin for fixing placeholder issues in old IE browsers. It seems to cover most scenarios and is very easy to  implement 🙂

https://github.com/mathiasbynens/jquery-placeholder

Just add the script after the jQuery and call

$('input, textarea').placeholder();

You will also need to add the placeholder style in your css.

/* Placeholder fix for IE9 for use with jQuery.placeholder plugin */
 .placeholder { color: #aaa; }

If you are a c# razor person, something like this on your impacted pages will do the trick (assuming you something like

@RenderSection("MyJavaScript", false)

in your layout).

@section MyJavaScript
 {
 <script src="@Url.Content("~/Scripts/jquery.placeholder/jquery.placeholder.js")" type="text/javascript"></script>
 <script>
 $('input, textarea').placeholder();
 </script>
 }