Gmail removes "position: relative" as inline CSS (Email Temlate)

Question

From what I understand, Gmail doesn't accept CSS blocks in my head at all, so I add a bunch of inline CSS to my email template to make it work.

However, I am struggling with the CSS positioning property. I want the image to sit on top of the background image, so I set the parent div to position: relative and the image to absolute. However, for some reason, Gmail removes the style attribute that declares the position: relative from the div. However, it supports all other inline CSS.

Any idea? Any workaround?

Answer 1

Unfortunately, I suspect that you may have to give up your very reasonable ideas regarding div and positioning when designing for email. CSS support in email clients is a confusing nightmare.

The only (relatively) surefire way to get the email layout to go with the old school spreadsheet is unsuccessful but inevitable.

The campaign monitor has an excellent summary of CSS support for the email client here .

Answer 2

I had similar problems with layouts when sending email newsletters. The solution was to use tables to properly place things. It is dated, but I think it was the only way to make things look the way they should.