View Full Version : HTML emails with CSS.

02-17-2012, 02:02 PM
I need to create a newsletter which emails people a HTML email

It needs to roughly look like the image i attached.

Is there a best method for creating HTML emails and use CSS styling?

Also is the a special way to use images or do i just link to the using the full http path?

Is the a problem with background-image? It never seems to work for me in an email.

02-20-2012, 11:49 AM
or markup in the original test email, I utilized a blend of CSS and traditional techniques (Tables, etc.). Take the following markup from the original test-email whereby I used a Table for presentation [shudder] and a TD background to ensure the background would appear even in clients offering poor CSS support:

‹td width="28" background="imagepath"›‹img src="imagepath" width="28" height="25" /›‹/td›

This approach was a compromise, offering extended use of CSS and ensuring design integrity across the board. I have since matured my approach, however, employing fully-semantic markup (my standard practice for websites). Consider the following example:

‹div id="Title"›
‹h1›National Adoption Day‹/h1›
‹h2›‹a href="url"›Learn more‹/a›‹/h2›

02-20-2012, 12:13 PM
Ive more or less got the email working, it works for Outlook, Apples Mail however hotmail is being a pain

I've set a td's height to 150px in my mark up, both using style="height:150px;" and height="150" however using firebug i get the elements height being 181.520px and another td marked p to 120px is actaully rendering at 148px. Is the anyway i can say "Do my CSS rules and ignore all of hotmails" (i assume is a hotmail CSS style causing this?)

EDIT: After removing the sizes from my td's and just leaving them on the img inside the td the size has gone from 181 down to 158px, still too big but for some reason its shrunk