HTML Absolute positioning in Gmail

[momo98]

Hello everyone,

I have a coding problem. I want to embed the following code in Gmail for my signature. However, the CSS function "position: absolute; " is not supported by Gmail.

Would you be able to reproduce the following code without using the value “position: absolute; and keeping the same desing ?

here it is :

<header id="separatorHeader" style="height: 15px;">
    <span style=" display: block; width: 100%; height: 100%; position: relative;">
        <span style="background-color: rgb(116, 116, 166); width: 100px ; left: 0px; position: absolute; height: 100%;"></span>
        <span style="background-color: rgb(116, 116, 166); width: 220px; left: 120px;position: absolute; height: 100%; "></span>
        <span style=" background-color: rgb(116, 116, 166); width: 140px; left: 360px; position: absolute; height: 100%; " ></span>
    </span>
</header>

I have tried without any good results, that's why i ask for help !

Thank you very much 🙂

 

[Malcolm]

Hey there,

Code Forum uses Gmail so I’ll take a look into this for you and let you know! 🙂

 

[Antero360]

Hello everyone,

I have a coding problem. I want to embed the following code in Gmail for my signature. However, the CSS function "position: absolute; " is not supported by Gmail.

Would you be able to reproduce the following code without using the value “position: absolute; and keeping the same desing ?

here it is :

<header id="separatorHeader" style="height: 15px;">
    <span style=" display: block; width: 100%; height: 100%; position: relative;">
        <span style="background-color: rgb(116, 116, 166); width: 100px ; left: 0px; position: absolute; height: 100%;"></span>
        <span style="background-color: rgb(116, 116, 166); width: 220px; left: 120px;position: absolute; height: 100%; "></span>
        <span style=" background-color: rgb(116, 116, 166); width: 140px; left: 360px; position: absolute; height: 100%; " ></span>
    </span>
</header>

I have tried without any good results, that's why i ask for help !

Thank you very much 🙂

I found this article that may help you a bit better. I know I have done it in the past, but I have created the email from scratch lol, I am assuming you are just wanting to insert your template into the signature area.

How to Create HTML Signature in Gmail?

Are you designing an email signature for your business? You can prepare HTML signature for Gmail and here's how to make an email signature.

mashtips.com

 

[Malcolm]

What if you tried using postion: relative?

 

[simong1993]

Correct me if i am wrong and i am going back many years now but it was common practice to build emails and signatures in tables rather then CSS. It means different email clients would load them with little issues and it was a lot easier to put together 😀

 

[momo98]

J'ai trouvé cet article qui peut vous aider un peu mieux. Je sais que je l'ai fait dans le passé, mais j'ai créé l'e-mail à partir de zéro lol, je suppose que vous voulez juste insérer votre modèle dans la zone de signature.

How to Create HTML Signature in Gmail?

Are you designing an email signature for your business? You can prepare HTML signature for Gmail and here's how to make an email signature.

mashtips.com

Hello, Yes indeed I would like to keep the same design as this code. But I would like to integrate it into my Gmail signature. So I'm asking if it's possible to keep the same design without using "position:" in the code. Thank you for your reply !

 

[momo98]

What if you tried using postion: relative?

Hello,
Position: relative; is not supported by Gmail ( for the signature ), here you can see what code is not supported by Gmail for the signature : https://www.campaignmonitor.com/css/positioning-display/position/

Tanks You !!

 

[Malcolm]

What you may want to try, and it's what I found researching into this, was to create the signature using HTML/CSS in an HTML document, then go to the file via your browser and copy the content, then paste it into the signature box. This still may not translate the position but would get you a step closer.