I can't add "position: relative/absolute" attribute on html for emails

Gravity Support Forums » Plugin Support » Gravity Forms

Nantyliana
Member
Hey there, thanks all you guys for your hard work!

I am customizing auto responders for one form, I have used a div tag to set my email content inside a rounded box with background. Now I am struggling to add an image on top of this box to make it look as if it was half outside the box (not inside the margin), but I just can't get it.
Would you help please?

I have been getting familiar little by little to coding terms, etc. So please just don't make it hard for me to understand your coding language :)

This is what I have built upon W3schools.com, which I thought would look the same on the emails, but no luck:
```
<html><div style="width:600px; height:auto; border:none;  -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 40px 100px 10px 40px; background:#99CCCC
; position: relative; top: 10; left: 10;" >
<img src="http://www.adondeiremos.com.mx/kleverest/wp-content/uploads/Thanks.png" style="position: absolute; top: -15px; left: 580px;"/>
<body>
"Some content"
</body></div>
</html>
```
Thanks!
Posted 12 years ago on Thursday November 10, 2011 | Permalink

Your coding is a bit off there in general, try this out to see if there is any difference to start:

<html>
<body>
<div style="width:600px; height:auto; border:none; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 40px 100px 10px 40px; background:#99CCCC
; position: relative; top: 10; left: 10;" >
<img src="http://www.adondeiremos.com.mx/kleverest/wp-content/uploads/Thanks.png" style="position: absolute; top: -15px; left: 580px;"/>
"Some content"
</div>
</body>
</html>

Posted 12 years ago on Thursday November 10, 2011 | Permalink

Kevin Flahaut
Administrator

A couple of things to note here. First, you don't need to add the opening and closing HTML tags in your email markup.. you can omit the BODY tags too. The email clients all strip that right away so it's not needed.

After that, you should know that CSS support in different email programs is notoriously bad. MS Outlook especially. When you're formatting HTML emails, you need to keep it as simple as possible to make sure the email formats properly across the widest group of email clients. Absolute positioning may not work at all in many clients. Think old school.. use HTML tables if necessary and images where you can if you're trying to pull of a more complex design.

Here are some resources you should check out related to HTML emails.. stuff on CSS support, suggested ways to add styles, etc.

http://www.campaignmonitor.com/css/

http://www.campaignmonitor.com/blog/post/2038/optimizing-css-presentation-in-html-emails/

http://www.sitepoint.com/code-html-email-newsletters-3/

Also, if you're more comfortable developing using your CSS in an external style block, there is a nifty little tool that will take that and then convert them into inline styles.

http://beaker.mailchimp.com/inline-css

Hope that helps a bit. If you want to know more just do a quick Google search on the topic. There are tons of related resources out there.

Posted 12 years ago on Thursday November 10, 2011 | Permalink
Nantyliana
Member

Amazing,
this is all so interesting. I was testing my e-mails on Windows Live only, which makes me wonder if other e-mail services will show the same result. So as I see it's not recommendable to use "special" attributes then? Oh, before I forget I got another quick question, I just read documentation for character counter (Roy Jin, if that's correct). Is it possible to change the settings to word coun only? if so, where do I change this parameter, is it under plugin editor?
Thanks so much.

Posted 12 years ago on Thursday November 10, 2011 | Permalink