Menu
From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work.
However, I'm struggling with the CSS positioning property. I want an image to sit on top of a background image so I set the parent div of both 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. It keeps all other inline CSS though.
Any idea? Any workaround?
740
Bookmark this question. Show activity on this post. From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work.
Unfortunately, you can't use position: absolute .
Update: Outlook 2007 and up doesn't support position:absolute , and at least some versions of Gmail, Yahoo Mail, and possibly Hotmail don't support it either. The Style in Email link is broken!
To turn off the relative positioning of an element in CSS, you can set the position property of that element to static , this will attach that element back to the whole document flow.
Sadly, I suspect you may have to abandon your perfectly reasonable ideas of divs and positioning when designing for email. CSS support in email clients is a tangled nightmare.
The only (relatively) surefire way of forcing layout on email is to go with an old school tables layout, which is unfortunate, but unavoidable.
Campaign Monitor has an excellent summary of email client CSS support here.
52
I experienced similar layout problems when sending email newsletters. The solution was to use tables to position things properly. It's dated, but I think it was the only way to make things look the way they should.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
