HTML E-Mail from Sharepoint looks different than on website

Question

The problem is the following: I do want to send an (HTML) E-Mail after a specific Workflow task. For this I created a Variable, posted my HTML inside and attached this variable to the mail, which works fine. But after I receive the E-Mail, it looks slightly different than I planned for.

I created two JSFiddles for this: The first one displays how I want it to look and the second one displays the received look.

How I want it to look: https://jsfiddle.net/zoxkn3ku/
How it looks: https://jsfiddle.net/zoxkn3ku/1/

The "Vom:" column is slightly higher first column and the "Bis:" column is even worse. One thing to note is, that the "Vom:" column only has the wrong header cell. All the others cells are correctly aligned. The "Bis:" column is completely wrong however.

I have a similar E-Mail already working in my workflow (also with the HTML-Code saved in a variable), so I don't think, that this is the problem. I also tried max-width / max-height, but it didn't help.

Thanks in advance!

HTML:

<BODY>
  <br />
  <br />
  <p>Sehr geehrte/r Frau/Herr VERTRETER,</p>
  <p>in der unteren Tabelle finden Sie meine Urlaubstage und muss an diesen Tagen, wie abgesprochen,&nbsp; durch Sie vertreten werden.</p>
  <table>
    <tr>
      <th>Genehmigte Urlaubstage</th>
      <th class="dates">Von:</th>
      <th class="dates">Bis:</th>
    </tr>
    <tr>
      <td>Urlaubstage 1</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 2</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 3</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 4</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 5</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
  </table>
  <p>Mit freundlichen Grüßen,</p>
  <p>ANTRAGSSTELLER</p>

CSS:

<style>body {
  font-family: "Calibri", Arial, sans-serif;
  font-size: 14;
}

#pic {
  margin-left: 490px
}

table {
  margin-left: 10px;
  border-collapse: collapse;
  width: 500px;
  table-layout: fixed;
}

th {
  color: #009EE3;
  font-variant: small-caps;
  font-size: 20;
  text-align: left;
  padding: 10px
}

td {
  border: 2px solid #6E6E6E;
  padding: 15px
}

.dates {
  text-align: center;
  width: 120px;
  height: 70px
}

</style>

This is the code I paste to the workflow variable (with inline style-tag for HTML E-Mail):

<HTML>
   <HEAD>
      <style>body {font-family: "Calibri", Arial, sans-serif; font-size: 14;} #pic {margin-left: 490px} table { margin-left: 10px; border-collapse: collapse; width: 500px; table-layout: fixed;} th {color: #009EE3; font-variant: small-caps; font-size:20; text-align: left; padding:10px} td {border: 2px solid #6E6E6E; padding: 15px} .dates{text-align: center; width: 120px; height: 70px}</style>
      <TITLE></TITLE>
   </HEAD>
   <BODY>
       <p>Sehr geehrte/r Frau/Herr VERTRETER,</p>
       <p>in der unteren Tabelle finden Sie meine Urlaubstage und muss an diesen Tagen, wie abgesprochen,&nbsp; durch Sie vertreten werden.</p>
      <table>
         <tr>
            <th>Genehmigte Urlaubstage</th>
            <th class="dates">Von:</th>
            <th class="dates">Bis:</th>
         </tr>
         <tr>
            <td>Urlaubstage 1</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 2</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 3</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 4</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 5</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
      </table>
       <p>Mit freundlichen Grüßen,</p>
       <p>ANTRAGSSTELLER</p>
   </body>
</html>

Answer 1

You had given 70px padding-bottom for the classes dates2 and dates3 here's the updated fiddle

body {
  font-family: "Calibri", Arial, sans-serif;
  font-size: 14;
}

#pic {
  margin-left: 490px
}

table {
  margin-left: 10px;
  border-collapse: collapse;
  width: 500px;
  table-layout: fixed;
}

th {
  color: #009EE3;
  font-variant: small-caps;
  font-size: 20;
  text-align: left;
  padding: 10px
}

td {
  border: 2px solid #6E6E6E;
  padding: 15px
}

.dates1 {
  text-align: center;
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}

.dates2 {
  text-align: center;
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}

.dates3 {
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}
}

HTML E-Mail from Sharepoint looks different than on website

Question

1 answers

solution1
0 2017-06-01 11:17:26

HTML E-Mail from Sharepoint looks different than on website

Question

1 answers

solution1 0 2017-06-01 11:17:26

solution1
0 2017-06-01 11:17:26