CODEWITHSUNDEEP
html-email
chchrist
chchrist

Reputation: 19822

email template position absolute?

Is it safe to use position:absolute in a email template?

Upvotes: 21

Views: 76297

Answers (6)

Nathan
Nathan

Reputation: 5259

It's not safe at all.

From https://www.caniemail.com/features/css-position/, it's supported on Apple Mail (desktop, iOS), but not any Gmails (web, apps) or Outlooks (desktop Windows, Outlook.com, apps) and not a lot of others.

For an alternative, look into 'faux absolute positioning HTML email', using max-height:0 on a parent.

Upvotes: 0

Jomin George Paul
Jomin George Paul

Reputation: 569

it is not a safe manner to use position absolute in emailers,because all of the email server did'nt support the tag..instead using postion absolute you guys can use

<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
  <tbody>
    <tr>
            <td align="left" valign="top">
              <p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
              <p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
            </td>
          </tr>
        </tbody>
      </table>

even you guys can use clickable button on it by adding this code in another td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width" >
    <title></title>
</head>
<body style="Margin:0px; Padding:0px;">
    <table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td align="center" valign="top">
                    <table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
                        <tbody>
                            <tr>
                                <td align="center" valign="top">
                                    <table width="100%" align="center" style="Margin:0px auto; Padding:0px; border-collapse:n-left: 20px; max-width:600px; " border="0" cellspacing="0" cellpadding="0" >
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top">
                                                    <p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
                                                    <p  Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table width="100%" align="left" style="Margin:0px auto; Padding:0px; border-collapse:collapse;  max-width:600px; Margin-left: 20px;  Margin-top:15px;" border="0" cellspacing="0" cellpadding="0" >
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top">
                                                    <a href="https://www.google.co.in/" style="padding: 10px 35px; text-decoration: none; color: #ffffff; background-color:#000000; letter-spacing: 0.55px; text-align:left; line-height: 24px; font-family:'Open Sans',arial,sans-serif!important;">Reset Your Password</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    
                    
                </td>
            </tr>
        </tbody>
    </table>

Upvotes: 10

Dennis G
Dennis G

Reputation: 21788

Depends on which mail clients your users are using. Outlook for example handles position: absolute well, Thunderbird on the other hand doesn't.

I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).

See the following page about styling tips on HTML mails, including some position absolute advice:

Upvotes: 17

iconique
iconique

Reputation: 1225

absolute in css not working for HTML email. If you gonna use absolute for Image combination, you can use such style.

 background-image: url(url_to_your_image);

Hope it will help you.

Upvotes: 0

Alex Berg
Alex Berg

Reputation: 747

Adding to an old question, I know - but I can confirm that neither GMail supports position: absolute at the moment.

Upvotes: 12

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263047

According to Style in Email, neither AOL (before release 9) nor Mozilla Mail/ThunderBird (all versions) support absolute positioning in the email body.

Upvotes: 3

Related Questions