Any way to set a border's height?

Ellie · February 23, 2018, 7:29am

I’m working on an html email and I was wondering how to do this one or if this is even possible in an email template considering some codes aren’t supported by some email providers and might encounter some issues when it comes to responsiveness.

I’ve managed to do everything except for the blue border like line on the left of the text.
Would appreciate any help. Thanks.
Here’s my code. I didn’t include the code for the styles as I don’t have any problems with them. Just let me know if the styles are needed too.

<tr>
     <td>
          <table role="presentation" class="email-container" cellspacing="0" cellpadding="0" border="0" width="600">
                <tr>
                     <!-- Column : BEGIN -->
                     <td class="stack-column" valign="top" align="center">
                         <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="270" style="margin: auto;">
                             <tr>
                                  <td align="center">
                                       <img alt="" class="fluid" src="img/some-img.png" border="0" height="" style="height: auto;">
                                  </td>
                             </tr>
                             <tr>
                                 <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                             </tr>
                         </table>
                      </td>
                      <!-- Column : END -->
                      <!-- Column : BEGIN -->
                      <td class="stack-column" valign="top" align="center">
                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="330" style="margin: auto;">
                              <tr>
                                  <td height="25" style="font-size: 1px; line-height: 25px;">&nbsp;</td>
                              </tr>
                              <tr >
                                  <td align="left">
                                      <h1 style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; color: #2C2C2C; padding: 0 20px; margin: 0;">Some header text</h1>
                                  </td>
                              </tr>
                              <tr>
                                 <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                              </tr>
                              <tr>
                                  <td align="left" style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 400; font-size: 14px; line-height: 22px; color: #606060;">
                                       <p style="padding: 0 20px; margin: 0;">Some text some text some text some text</p>
                                  </td>
                             </tr>
                              <tr>
                                  <td height="5" style="font-size: 1px; line-height: 5px;">&nbsp;</td>
                              </tr>
                              <tr>
                                  <td align="left">
                                      <a href="#" target="_blank" style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 700; font-size: 14px; line-height: 22px; color: #275DAD; padding: 0 20px; margin: 0; text-decoration: none;">Some link</a>
                                  </td>
                              </tr>
                              <tr>
                                  <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                              </tr>
                          </table>
                      </td>
                     <!-- Column : END -->
                 </tr>
              </table>
         </td>
      </tr>

Ray.H · February 23, 2018, 3:07pm

Hi Ellie,
If your wanting the border to follow the height of the text only then you can slip your border style in the nested table role="presentation"

<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column" valign="top" align="center">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="330" style="margin: auto; border-left: 2px solid blue;">

Scroll to the right to see where I added it to your inline styles

Ray.H · February 24, 2018, 5:06am

Hey Ellie,
I see what your wanting to do now, your thread title and image explains it.
It sounds like you are wanting to set a specific height for the border at top left of text. My previous reply didn’t cater to a specific height.

Adding <td class="border"> with a div nested in it, will allow you to make a border that you can style as you please. Set a width and height on the div, then a bg color. Then position it vertically with a top margin.

td.border div {
   height:40px;
   width:3px;
   margin-top:22px;
   background:lightblue;
}

 <!-- Column : END -->
 <!-- Column : BEGIN -->

 <td class="border" valign="top"><div></div></td>

 <td class="stack-column" valign="top" align="center">
     <table class="right" role="presentation" cellspacing="0" cellpadding="0" border="0" width="330" style="margin: auto;">

That will resemble your image and allow you to fine tune it.

Ellie · February 26, 2018, 2:38am

Not working, though I might be doing something wrong. But I get the logic and this makes sense. I’ll try experimenting more and figure it out. Thank you so much, Ray.

Ray.H · February 26, 2018, 3:03am

Hi Ellie,
I know your writing this for email, which is the reason for the table and inline styles. I went ahead and used a 4.01 Transitional doctype to allow for the deprecated attributes as well.

Here is the test page I was working with, run this code in your browser and it should match the screenshot from my last post.

border-div.html (3.3 KB)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>

<style type="text/css">
td.border div {
   height:40px;
   width:3px;
   margin-top:22px;
   background:lightblue;
}
</style>

</head>
<body>

<table class="email-container" cellspacing="0" cellpadding="0" border="0" width="600">
    <tr>
         <!-- Column : BEGIN -->
         <td class="stack-column" valign="top" align="center">
             <table cellspacing="0" cellpadding="0" border="0" width="270" style="margin: auto;">
                 <tr>
                      <td align="center">
                           <img src="http://via.placeholder.com/230x230" width="230" height="230" alt="">
                      </td>
                 </tr>
                 <tr>
                     <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                 </tr>
             </table>
          </td>
          <!-- Column : END -->
          <!-- Column : BEGIN -->

          <td class="border" valign="top"><div>&nbsp;</div></td>

          <td class="stack-column" valign="top" align="center">
              <table cellspacing="0" cellpadding="0" border="0" width="330" style="margin: auto;">
                  <tr>
                      <td height="15" style="font-size: 1px; line-height: 15px;">&nbsp;</td>
                  </tr>
                  <tr >
                      <td align="left">
                          <h1 style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; color: #2C2C2C; padding: 0 20px; margin: 0;">Some header text</h1>
                      </td>
                  </tr>
                  <tr>
                     <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                  </tr>
                  <tr>
                      <td align="left" style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 400; font-size: 14px; line-height: 22px; color: #606060;">
                           <p style="padding: 0 20px; margin: 0;">Some text some text some text some text</p>
                           <p style="padding: 0 20px; margin: 0;">Some text some text some text some text</p>
                           <p style="padding: 0 20px; margin: 0;">Some text some text some text some text</p>
                      </td>
                 </tr>
                  <tr>
                      <td height="5" style="font-size: 1px; line-height: 5px;">&nbsp;</td>
                  </tr>
                  <tr>
                      <td align="left">
                          <a href="#" target="_blank" style="font-family: 'Helvetica-Neue', sans-serif; font-weight: 700; font-size: 14px; line-height: 22px; color: #275DAD; padding: 0 20px; margin: 0; text-decoration: none;">Some link</a>
                      </td>
                  </tr>
                  <tr>
                      <td height="10" style="font-size: 1px; line-height: 10px;">&nbsp;</td>
                  </tr>
              </table>
          </td>
         <!-- Column : END -->
     </tr>
  </table>

</body>
</html>

Ellie · February 26, 2018, 7:01am

Awwww. Thank you so much, Ray! It’s working perfectly fine.

system · May 28, 2018, 2:01pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.