3CX Email Template funktioniert nicht ganz

NiceKype

Free User
Basic Certified
Mitglied seit
29. September 2020
Beiträge
11
Hallo zusammen,

ich dachte ich frage mal hier nach.
Und zwar habe ich mir für die Voicemail Email Benachrichtigung ein Template zusammengebaut. In der Webansicht funktioniert auch alles wie es soll. Aber in der E-Mail ist der Code auf einmal ganz anders.

Hier der Code:
HTML:
<!doctype html>
<html>
<head>
 
<title>Verpasster Anruf - Neue Voicemail</title>
    <style type="text/css">
        body {
            background-color: #f9f9f9;
        }
        body,td,th {
            font-family: "Helvetica",sans-serif;
            font-style: normal;
            font-size: 12px;
            line-height: 19px;
        }
        a {
            color: #ee0d0d;
            text-decoration: none;
            font-weight: bold;
        }
        p {
            color: #737F8D;
            font-size: 16px;
            line-height: 24px;
        }
        h2 {
            color: #4F545C;
            font-weight: normal;
            font-size: 21px;
        }
        .center {
            display: grid;
            justify-content: center;
        }
        img.logo {
            width: 200px;
            margin: 0 auto;
            padding: 40px;
        }
        .content {
            background-color: #fff;
            padding: 40px 50px;
            border-radius: 4px;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
            max-width: 680px;
            min-width: 640px;
        }

        .trennlinie {
            top: 20px;
            margin: 30px auto -10px auto;
            width: 100%;
            border: 1px solid #dcddde;
        }
        .bottom-text {
            color: #747F8D;
            font-size: 13px;
            padding: 40px 0 10px 0;
        }
        .footer-text {
            font-size: 12px;
            color: #99AAB5;
            text-align: center;
            line-height: 25px
        }
    </style>
</head>

<body>

    <div class="center">
        <img class="logo" src="https://www.purenext.de/assets/img/logo-large.png">

        <div class="content">
                
            <h2>Du hast eine neue Voicemail erhalten</h2>
            <p>
                <strong>Von:</strong> %%CALLER%% <br>
                <strong>An:</strong> "%%EXTNUMBER%%" - "%%EXTFIRSTNAME%%" "%%EXTLASTNAME%%"<br>
                <strong>Erhalten:</strong> "%%DATE%% %%TIME%%"<br>
                <strong>Dauer:</strong> "%%DURATION%%"
            </p>

            <div class="trennlinie"> </div>
            <div class="bottom-text">
                Diese Nachricht wurde automatisch von der 3CX Telefonanlage von <a href="https://www.purenext.de">Pure Next</a> erstellt und gesendet.<br>
                Sollte es Probleme mit einer E-Mail geben, wenden Sie sich an Ihren <a href="mailto:[email protected]">Administrator</a>.
            </div>
        </div>

        <p class="footer-text">
            Gesendet von Pure Next 3CX • <a href="https://www.purenext.de">www.purenext.de</a>
            <br><span class="copyright">Copyright &copy; 2022 by Pure Next • Alle Rechte vorbehalten</span>
        </p>
    </div>

</body>
</html>
p4r9oKrL.png

Aussehen sollte es so:
p4r9oKrL.png

Aber in der Email sieht es so aus:
zYQEEAXD.png
p4r9oKrL.png

Woran kann das liegen und vor allem wie kann ich das beheben?

Hoffe sehr, dass mir wer weiterhelfen kann.

Mit Besten Grüßen
Timo
 
Auf den ersten Blick würde ich sagen das er die Größe des Logos im original darstellt und nicht wie im CSS angegeben. Ohne mich jetzt mit CSS super auszukenne, kann es sein das die im CSS das .logo heissen muss und nicht img.logo?. Den Punkt scheint er zumindest zu ignorieren.
 
Er stellt das Logo in Original statt in angepasster Größe dar, das stimmt. Und natürlich kann ich nur .logo benutzen aber img.logo macht das gleiche im Normalfall.
Aber es ist ja auch nicht nur das Logo, alles ist irgendwie anders und scheint teile des CSS Codes zu ignorieren.
 
Was ich weiß ist das die meisten Email Clients max-width ignorieren, evtl hängt das damit zusammen. box-shadow ebenfalls.

EDIT: margin und padding ebenfalls. Eventuell alles in Tabellen packen!?
 
Das probier ich mal aus. Also den Box Shadow hab ich von einer anderen E-Mail von einem Anbieter abgeschaut und was geändert. Da funktionierte der. Aber die hatten meine ich auch Tabellen drin.
 
Halte uns mal auf dem Laufenden, finde das Thema interessant. Habe aber selbst zu wenig Ahnung von CSS.
 
Was ich gerade herausgefunden habe, Outlook erkennt garkeine div Container. Deswegen ist alles diesbezüglich "defekt". Outlook erkennt nur Tabellen dahingegen. Auch padding wie du sagtest ist ein Punkt der von Outlook ignoriert wird. Gibt aber Tabellenlösungen.

Ich probier mich mal aus und geb dann Feedback. Sollte jemand hier aber noch ne Möglichkeit haben, oder das besser können als ich (ich nutze Tabellen in der Webentwicklung so gut wie nie), lasst es mich gerne wissen ;)
 
  • Like
Reaktionen: bitn2
Dann weisst du ja zumindest schon mal wo es hakt. Bin gespannt auf deine Lösung.
 

Statistik des Forums

Themen
44.414
Beiträge
232.721
Mitglieder
78.331
Neuestes Mitglied
b2daniel