Email newsletter not rendering correctly

Question

I'm new in CSS and HTML. I have an email template with HTML and CSS code. I put a pink circle box in my newsletter template to the top right: http://www.pedersenshotell.se/newsletter/

It looks OK on Firefox, Opera etc., but when I upload it to the Newsletter email campaign and send to Yahoo, Gmail, Outlook and Hotmail it looks so ugly. It shows a square box instead of a circle. Why?

Answer 1

HTML e-mails are tough things. The email clients are often not normal browsers they don't render the HTML correctly and you'll be surprised why a normal thing (like background) is not working there.

The web services are removing/blocking parts for security reasons and so on.

I would stick with HTML 3.2 or simpler HTML solutions which are pretty annoying I know, and I recommend you to use Fractal which is an email validator service to check your work.

You can get hints from the Email Standards Project as well to see which functions are supported and which are not.

Ahh, and I almost forgot the most important part. Please provide a web link on the top of the mail to provide a web based view of the newsletter, as usually "View this message as a Web page" or "Click here if the email is broken".