CODEWITHSUNDEEP
htmlcssoutlook
Ronnie
Ronnie

Reputation: 93

HTML Email Signatures

I am trying to make an HTML email signature.

I have managed to get it the way I would like it to look, but something strange seems to be happening when viewing the signature in the Outlook client compared to Outlook on the web, please see image below.

This is what it looks like when viewed on the web. Outlook On The Web

And this is what it looks like when viewed in the Outlook client.

enter image description here

Here is my HTML.

<html>
<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>
</html>

Here is my CSS.

p {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}
a {
  color: rgb(22, 31, 53);
}
.links p {
  color: rgb(22, 31, 53);
  display: inline;
}

https://codepen.io/atomicaltv/pen/rogxMO

Upvotes: 1

Views: 2125

Answers (2)

Agash Thamo.
Agash Thamo.

Reputation: 748

Alright, it seems Outlook doesn't like the display property being changed. I switched your code a bit, so it uses span elements instead of paragraphs, so they naturally align the way you want them to, without using the display property.

Here's the original (without inlined css):

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}
<!DOCTYPE html>
<html>

<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</body>

</html>

And here's a inlined version, which I tested using Office365 Outlook client:

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}
<!DOCTYPE html>
<html>

<body style="font-family: Georgia;color: rgb(22, 31, 53);">
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;color: rgb(22, 31, 53);">
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>

</html>

Note: your CSS to change the color is redundant. I left it as is using the new elements, in case you wanted to change them later to actually meaningful things.

Upvotes: 2

Dhiraj kadam
Dhiraj kadam

Reputation: 377

Try this css

.links{
  display: flex;
  flex-direction: row;
  align-items: center;
}

Hope that helps

Upvotes: 0

Related Questions