Hey everyone, I’m working on an email campaign for a client who wants to send custom gift certificates. The tricky part is positioning text over an image while keeping it dynamic. I’ve tried using absolute positioning, but it’s not playing nice with Gmail.
We’re using MailChimp for this campaign. The layout works great in some email clients, but Gmail is giving us trouble. Here’s a snippet of the problematic code:
<div style="height:243px; width: 500px; position: relative;">
<img src="example.jpg" style="position: absolute;">
<div style="position: absolute; top: 110px; left: 130px;">
*|NAME|*</div>
<div style="position: absolute; top: 140px; left: 130px;">
OurWebsite.com</div>
<div style="position: absolute; top: 166px; left: 130px;">
$50</div>
<div style="position: absolute; top: 200px; left: 370px;">
*|DISCOUNT|*</div>
</div>
Any suggestions on how to make this work in Gmail? I’m open to alternative approaches that might be more compatible across different email clients. Thanks in advance for your help!
yo, ive dealt with this gmail headache too. try using background images instead of absolute positioning. something like:
works better across clients. good luck!
I’ve been in the email marketing game for a while, and Gmail’s quirks can be a real pain. Have you considered using VML (Vector Markup Language) for Outlook and a fallback method for other clients? It’s a bit more complex, but it’s saved my bacon more than once.
Here’s the gist: create a VML wrapper for Outlook, then use a standard img tag with a positioned div inside for other clients. Gmail will ignore the VML and display the fallback. You’ll need to adjust the positioning, but it generally works well.
Remember to thoroughly test across devices and clients. I’ve had seemingly perfect campaigns fall apart on mobile, so don’t skimp on the QA process. And if all else fails, sometimes simplifying the design is the best solution. Good luck with your campaign!
I have encountered similar issues with positioning text over images in campaigns, especially when targeting Gmail. In my experience, relying on absolute positioning can introduce compatibility problems, so I switched to a table-based layout. While the change might feel like a compromise in terms of precision, it has proven to be far more reliable across email clients. I now use a main table for the image background and a nested table for text, adjusting padding and alignment to achieve a balanced layout. It is important to test these changes across platforms using tools like Litmus or Email on Acid.