css - problems with negative margin in mail template

html css email gmail yahoo-mail
neo picture neo · Oct 31, 2013 · Viewed 9.8k times · Source

I'm creating a html mail template, I used a ribbon so I need to a move it a little bit past border. you can see the code here: http://jsfiddle.net/GEqk7/

To do this first i used position: relative; and I gave the ribbons a negative position but the thing is that position is not well supported by gmail and yahoo and ... . So I decided to use negative margin but it looks like gmail and yahoo don't support that either.

is there a way or a fallback to to do this?

Answer

Akash Badiyani picture Akash Badiyani · Jul 10, 2014

Most of the Email clients dont support negative margin. You will have to take that ribbon image as a background.

Related questions

Gmail HTML email background

I'm working on an HTML email. The problem I get is that GMAIL doesn't use the "background-position" i give it. I have a table with 100% width that has a background that has to be centered. Most clients do this perfectly …

Read More
css padding is not working in outlook

I have following html in email template. I am getting different view in MS Outlook and in gmail for the same. <tr> <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2…

Read More
Is there an equivalent of CSS max-width that works in HTML emails?

I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available …

Read More