Border on top and bottom but not on side of text - HTML

[02638]

Hello,

I am attempting to HTML a way to get a border to appear over a narrow section of text, a date to be precise, but not stretch across the length of the email. From looking at the editor, it would appear that I've achieved this:

However, when sending myself a preview, it appears thus:

Note the additional, undesired borders on either side.

The HTML looks like this (i added padding to the text module so that the border doesn't run into the blue image above):

<div style="align: center;">
<p style="text-align: center; font-size: 16px; line-height: 150%;"><span style="color: #000000; border-top: 1px solid #000000; width: 150px; border-bottom: 1px solid #000000; padding-top: 5px; padding-bottom: 5px;">October 28, 2024</span></p>
</div>

Any idea how to fix?

[Mike_Eastwood · Accepted solution]

Hi @02638 

I would try explicitly unsettng the border for the left and right, because it may be set somewhere else and/or a default. 

Using your example I've added some CSS for you to test. 

<div style="align: center;">
    <p style="text-align: center; font-size: 16px; line-height: 150%;">
         <span style="color: #000000; border-top: 1px solid #000000; width: 150px; border-bottom: 1px solid #000000; border-left: none; border-right: none; padding-top: 5px; padding-bottom: 5px;">October 28, 2024</span>
  </p>
</div>

I've added "border-left: none; border-right: none;"

Did that work?

Mike

Here to learn more about HubSpot and share my HubSpot Knowledge. I'm the founder of Webalite a Gold HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world's first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

[Mike_Eastwood]

Hi @02638 

If Outlook is insisting on adding borders (annoying) then maybe you could change the border color to the background color?

Have fun

Mike

[02638 · Accepted solution]

Another clever idea, thank you! I did try this - seemed like the Outlook 2016 desktop wanted to make it a 1px black border the whole way around no matter what. 

What ultimately solved the problem:
-Combining most of the the p and span HTML into just the P part
-Using margin HTML in the DIV and sort of squeezing from either side.

<div style="align: center; margin-left: 234px; margin-right: 234px;">
<p style="text-align: center; border-top: 2px solid #000000; width: 132x; border-bottom: 2px solid #000000; padding-top: 5px; padding-bottom: 5px; border-left: none; border-right: none; font-size: 16px; line-height: 100%;">November 4, 2024</p>
</div>

[Mike_Eastwood]

Nice work @02638 it's all part of the fun!

-Mike

[Mike_Eastwood · Accepted solution]

Hi @02638 

I would try explicitly unsettng the border for the left and right, because it may be set somewhere else and/or a default. 

Using your example I've added some CSS for you to test. 

<div style="align: center;">
    <p style="text-align: center; font-size: 16px; line-height: 150%;">
         <span style="color: #000000; border-top: 1px solid #000000; width: 150px; border-bottom: 1px solid #000000; border-left: none; border-right: none; padding-top: 5px; padding-bottom: 5px;">October 28, 2024</span>
  </p>
</div>

I've added "border-left: none; border-right: none;"

Did that work?

Mike

Here to learn more about HubSpot and share my HubSpot Knowledge. I'm the founder of Webalite a Gold HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world's first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

[02638]

Thank you for your response. To add some color to this, the side borders seem to only apply in the Outlook desktop app. The original code seems to be working in Gmail, Ios (per the Inbox Preview), and others, but not in the Outlook desktop app. Works on the Outlook website, desktop and mobile, and the mobile app, but not the desktiop app.

Appreciate your additional code. Tried it, but it didn't fix the issue, neither did adding "border collapse" as recommended by a search.

A minority of our subscribers seem to use this format, but alas our work accounts are set to it.