Fullscreen footer email signature

Question

I coded a fullscreen footer email signature.

It is working in Apple Mail MacOS App, and on a Microsoft Outlook App on a Windows machine.

But if somebody replies the signatured email, the reply text sticks to the left edge, maybe because the email client reads my body tag like this:

 }body, html {
    margin: 0;
    padding-left: 0px;}

I tried to set the padding-left to 20px and the td to -20px, but I think tables are not moveable by minus figures values.

The full code:

<meta charset="UTF-8">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Alte-Haas-Grotesk', Arial, sans-serif; line-height: 1.5; width: 100%; margin: 0; border-collapse: collapse;">
  <!-- Email Text -->
  <tr>
    <td style="padding: 10px 20px; font-size: 14px; color: #333; font-family: 'Alte-Haas-Grotesk', Arial, sans-serif;">
        <br>
        <br>
        <br>
        Sehr geehrter xxxx,
        <br>
        <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        <br>
        <br>
        <br>
        <br>
        Mit herzlichen Grüßen,
        <br>
        <br>
        xxxx xxxxx
      <br><br><br><br><br><br><br>
    </td>
  </tr>

  <tr>
    <td style="padding: 10px 20px; font-size: 13px; color: #333; font-family: 'Alte-Haas-Grotesk', Arial, sans-serif;">
      <strong>xxxx xxxx</strong><br>
        <br>
        Tel.: xxxx - xxxxxxx<br>
        Mobil: xxxxx - xxxxxxx<br>
        <a href="mailto:xxxx@xxxxx.com" style="color: #000; text-decoration: none;">Email: xxx@oxxxxxx.com</a><br>
        <br>
        <br>
        <br>
    </td>
  </tr>

  <!-- Footer -->
<tr>
  <td style="background-color: #98DBCE; padding: 20px; text-align: left; width: 100%; height: 600px; vertical-align: top; margin: 0;">
    <br>
    <br>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAApCAYAAABeBUcrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjUtMDItMDNUMTc6MDk6MjkrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI1LTAyLTAzVDE5OjA4OjE0KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI1LTAyLTAzVDE5OjA4OjE0KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyYjc5N2Q1NS01MGYzLTRkYTctOGZiOS0wZTVkNjBlMmEwZjYiIHhtcE1NOkRvY3VtZW50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" alt="SOG Logo" style="display: block; max-width: 220px; height: auto;">
    <br>
    <strong>xxxxx</strong><br>
    xxxxxxxxx<br><br>
   xxxxx<br>
    xxxxxx<br>
    xxxxxx<br><br>
    xxxxxx<br>
    xxxxx<br><br>
    <a href="mailto:xxxxe@oxxxxxx.com" style="color: #000; text-decoration: none;">xxx@oxxxxx.com</a><br>
    <a href="https://xxxxxxxx.com" style="color: #000; text-decoration: none;">www.xxxxxxxx.com</a>
  </td>
</tr>
</table>

<!-- CSS Print -->
<style>
  @media print {
    .footer {
      background-color: transparent !important; /* Hintergrundfarbe entfernen */
      color: #000 !important;
    }
  }

  /* Webfont */
  @font-face {
    font-family: 'Alte-Haas-Grotesk';
    src: url('https://eletterhead.') format('woff');
  }

  /* Standard-Styling */
  table td {
    font-family: 'Alte-Haas-Grotesk', Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
    margin: 0;
    padding: 0;
  }

  /* Standard-Ränder Dokument */
    
    body, html {
    margin: 0;
    padding-left: 0px;
  }
    

 
</style>

Answer 1

Today i had two new ideas.

1. Seperated the tables in to two tables, deleted the body 0 margins to get back reply paddings and pushed the second table to the left edge:

<table1 width="100%">email regular text</table>

<table2 width="120%" style="margin-left: -30px;">footer signature</table>

Result: Works, reply text has normal paddings again, but on some email clients still tiny small white paddings. Because of the width 120% the email window gets scrollable horizontally:

2. Deleted the body 0 margins and seperated the tables in to two also. Put a fat outline around the second table, colored in footer bg color

<table1 width="100%">email regular text</table>

<table2 width="100%"style="outline: solid 25px #98DBCE;">footer signature</table>

Result: Works, but on some email clients still tiny small white paddings too.

I am searching for better Ideas :(

Answer 2

Looks like the issue you're encountering is likely due to how different email clients handle reply formatting—they often strip or override your body styles. Here are a few suggestions: Wrap Your Signature in a Container: Enclose your signature in a nested table or a with inline left padding (e.g., style="padding-left:20px;"). This helps ensure the signature itself always has some left spacing even if the reply area doesn’t.

Use Inline Styles for Critical Spacing:

<td style="padding:10px 20px 10px 20px;">