CODEWITHSUNDEEP
csshtmlemailhtml-email
chandan
chandan

Reputation: 1574

Using absolute/relative position in email template

I am trying to apply absolute/relative position to an image inside an email. There's an image inside a span which needs absolute positioning to preserve line height of the paragraph.

Here's an image of what I'm trying to accomplish. enter image description here

I got to know absolute and relative positioning can't be used inside email templates, is it possible to fix the image positioning without using absolute positioning.

Upvotes: 0

Views: 4480

Answers (2)

scoopzilla
scoopzilla

Reputation: 883

This actually has a code entity:

 U+026A0 UNICODE
 ⚠ HEX CODE
 ⚠ HTML CODE

which you could then just style inline with more code:

 <p>Lorem Ipsum dolor sic met <strong style="color: #fff126">&#x26A0;</strong></p>

Snippet:

 <p>Lorem Ipsum dolor sic met <strong style="color: #fff126; back">&#9888;</strong></p>

The thing with using position: absolute in html emails is that they will 100% break on Outlook.

Upvotes: 2

Ted Goas
Ted Goas

Reputation: 7587

The position CSS property has very poor support in email clients, even the ones considered to have decent CSS support.

You're best bet is to try negating the image's line-height, something like this:

<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">

Line heights vary depending on the font and email clients tends to treat line-height a little differently. This isn't perfect, but it'll get you closer to your screenshot above.

Upvotes: 4

Related Questions