Email Marketing Tool

02638
Contributor

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

SOLVE

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:

02638_1-1729892684543.png

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

02638_2-1729892746703.png

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?

0 Upvotes
2 Accepted solutions
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

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

SOLVE

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.

View solution in original post

0 Upvotes
02638
Solution
Contributor

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

SOLVE

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>

 

02638_0-1730337545339.png

 

View solution in original post

5 Replies 5
Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

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

SOLVE

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

0 Upvotes
02638
Solution
Contributor

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

SOLVE

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>

 

02638_0-1730337545339.png

 

Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

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

SOLVE

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

 

-Mike

0 Upvotes
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

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

SOLVE

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.

0 Upvotes
02638
Contributor

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

SOLVE

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.

0 Upvotes