Cześć,
Mam problem z wyświetlaniem stopki w aplikacji Outlook na Windows. Stopka, która zawiera logo oraz tekst kontaktowy, wyświetla się poprawnie w aplikacji Outlook na macOS, jednak w wersji na Windows między logo a tekstem z informacjami o firmie pojawia się niechciany odstęp. Używam HTML-a i CSS-a w stopce, ale z powodu różnych silników renderowania Outlooka na różnych systemach, efekt końcowy na Windows jest inny.
Stopka jest wysyłana bezpośrednio z naszego CRM, dlatego tagi HTML i CSS są umieszczone w taki sposób, aby były zgodne z ograniczeniami tego systemu. Próbowałem różnych podejść, takich jak:
Usunięcie padding i margin z <td> oraz <img>.
Użycie display: inline-block i vertical-align: middle.
Wyrównanie logo i tekstu za pomocą tabel.
Niestety żadne z powyższych rozwiązań nie przyniosło oczekiwanych rezultatów na Windowsie. Poniżej załączam kod stopki, który obecnie używam. Czy ktoś spotkał się z podobnym problemem i zna skuteczne rozwiązanie?
Przykładowy mail:
<div>
<p>
<span style="background-color: #ffffff;">Szanowni Państwo,</span>
</p>
<p>
<span style="background-color: #ffffff;">Dziękujemy za zainteresowanie naszą ofertą.</span>
</p>
<p>
<span style="background-color: #ffffff;"></span>
</p>
<p>
<span style="background-color: #ffffff;">Chętnie poznamy Państwa potrzeby i przekażemy szczegółowe informacje na temat naszego rozwiązania.</span>
</p>
<p>
<span style="background-color: #ffffff;"></span>
</p>
<p>
<span style="background-color: #ffff00;">[W odpowiedzi na szczegółowe pytania]</span>
</p>
<p>
<span style="background-color: #ffffff;"></span>
</p>
<p>
<span style="background-color: #ffffff;">Zapraszamy do kontaktu w celu umówienia rozmowy telefonicznej lub wideokonferencji.</span>
</p>
<p>
<span style="background-color: #ffffff;"></span>
</p>
<p>
<span style="background-color: #ffffff;">Jeśli mają Państwo pytania, jesteśmy do dyspozycji.</span>
</p>
<p>
</p>
<p>
Z poważaniem,
</p>
<p>
Zespół Wdrożeniowy
</p>
<p>
<br>
</p>
<table style="width: 950px; border-collapse: collapse; color: #212121;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding: 0; margin: 0; width: 120px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0; margin: 0;">
<a href="#">
<img src="https://via.placeholder.com/115x38" alt="Logo" width="115" height="38" style="border: 0; display: block;">
</a>
</td>
</tr>
</table>
</td>
<td style="padding: 0; margin: 0; vertical-align: top; line-height: 1;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 0; margin: 0; color: #1f497d; font-size: 12px; line-height: 14px;">
<b>Nazwa Firmy</b> ul. Adres 123, 00-000 Miasto,
<a href="#" style="color: #0563c1;"><b>www.strona.pl</b></a> <br>
Telefon: <a href="tel:+48000000000" style="color: #0563c1;">+48 000 000 000</a>, Fax:
<a href="tel:+48000000000" style="color: #0563c1;">+48 000 000 000</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<img src="https://via.placeholder.com/722x103" width="722" height="103" style="display: block; border: 0;">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<p style="color: #2f5496; font-size: 9px; margin: 0;">
Niniejsza wiadomość jest przeznaczona wyłącznie dla adresatów. Prosimy o nieudostępnianie jej treści osobom trzecim.
</p>
</td>
</tr>
</tbody>
</table>
<br>
</div>
<br>
