1

I am working with an email template Design. my issue is that if you see the design there is an element with "P" , there is vertical black line above and below "P", but issue is the line doesn't join with other "P" line. the content in the white background part is dynamic, so i can't fix the height.

My question is how can I overcome this issue.

Please Help me. Thanks In advance.

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 23</h1>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" colspan="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#E7EBED;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<table width="600" cellspacing="0" cellpadding="0" border="0" colspan="0" align="left" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 4%;">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>           
</tbody>
</table>    
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; margin-bottom:2px; font-weight:normal;">September 24</h1>
</td>
</tr>
</tbody>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 25</h1>
</td>
</tr>
</tbody>
</table>
rocky
  • 11
  • 2

2 Answers2

0

Set the properties to style the top and bottom borders. U can use the style below...hope it is what you want. 

.className {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
Biko
  • 332
  • 3
  • 15
  • Please look the design ..  

    P

      it has two span element with background color black, I want these element to join another same element of diffenet tr     – rocky Apr 25 '16 at 08:20
0

Does height and width not apply to span?

found this one, try to use div instead of a span, span cannot hold width and height, much better if use div, div can hold height in which you could make it occupy the whole space to make it look connected, regards

Community
  • 1
  • 1
Freak
  • 115
  • 1
  • 1
  • 16
  • I have replaced the span to div element, But issue here i can't fixed the height. It should be on the basis of the height of

    Pre-Party Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs

    – rocky Apr 25 '16 at 08:51
  • @rocky, i found this one, http://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height – Freak Apr 25 '16 at 09:18
  • @rocky did this answer help? – Freak May 12 '16 at 05:08