HTML中的边框底部未显示

Question

I am trying to do an email with HTML design on VB.Net but the border bottom doesn't show up and I don't see anything wrong with the code.

You can see here that the border bottom is not showing :

Expected Border Bottom should be like this with a little gray line at the bottom :

Here is my code for the border bottom :

                    mm.Body = mm.Body & "<tbody><tr>"
                    mm.Body = mm.Body & "<td style=min-height:65px;background-color:#000000;border-bottom:1px solid #4d4b48;>"
                    mm.Body = mm.Body & "<img src=https://image.ibb.co/gf2547/Email_Header_PNG.png width=538 height=65 alt=Steam>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"

You can check my entire HTML code for the whole email here :

                    mm.Body = mm.Body & "<div>"
                    mm.Body = mm.Body & "<table style=width:538px;background-color:#393836; align=center cellspacing=0 cellpadding=0>"


                    mm.Body = mm.Body & "<tbody><tr>"
                    mm.Body = mm.Body & "<td style=min-height:65px;background-color:#000000;border-bottom:1px solid #4d4b48;>"
                    mm.Body = mm.Body & "<img src=https://image.ibb.co/gf2547/Email_Header_PNG.png width=538 height=65 alt=Steam>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"


                    mm.Body = mm.Body & "<tr>"
                    mm.Body = mm.Body & "<td bgcolor=#370E0E>"
                    mm.Body = mm.Body & "<table width=470 border=0 align=center cellpadding=0 cellspacing=0 style=padding-left:5px;padding-right:5px;padding-bottom:10px;>"
                    mm.Body = mm.Body & "<tbody><tr bgcolor=#370E0E>"
                    mm.Body = mm.Body & "<td style=padding-top:32px;>"
                    mm.Body = mm.Body & "<font color=#F12121> <h1> Dear " + firstname + " " + lastname + ", </h1> </font>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "<tr>"
                    mm.Body = mm.Body & "<td style=padding-top:12px;>"
                    mm.Body = mm.Body & "<font color=#c6d4df> <h3> The Newly Generated Password you need to login into your account is : </h3> </font>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "<tr>"
                    mm.Body = mm.Body & "<td>"
                    mm.Body = mm.Body & "<div>"
                    mm.Body = mm.Body & "<font color=#F12121> <h1> " + lbl1.Text + " </h1> </font>"
                    mm.Body = mm.Body & "</div>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "<tr bgcolor=#2A0808>"
                    mm.Body = mm.Body & "<td style=padding:20px;font-size:12px;line-height:17px;color:#c6d4df; font-family:Arial, Helvetica, sans-serif;>"
                    mm.Body = mm.Body & "<p style=padding-bottom:10px;color:#c6d4df;>This Email and Password was generated upon your request. The Verification Attempt included your correct Umbrella ID and Email.</p>"
                    mm.Body = mm.Body & "<p style=padding-bottom:10px;color:#c6d4df;>The Generated Password is required to complete the login.  <span style=color:#ffffff;font-weight:bold;>No one can access your account without also accessing this email.</span></p>"
                    mm.Body = mm.Body & "<p style=padding-bottom:10px;color:#c6d4df;><span style=color:#ffffff;font-weight:bold;>If you are not attempting to login</span> then please change your Umbrella Account password and consider changing your email password as well to ensure your account security.</p>"
                    mm.Body = mm.Body & "<p style=padding-top:10px;color:#61696d;>If you are unable to access your account then you may choose to <a rel=nofollow style=color:#8f98a0; target=_blank href=https://help.steampowered.com/#HelpUnauthorizedLogin?stoken=PbSXLaCZRzquMH0O2wIxCSPQlkzzZ%2BYDb0OWGxQEIhILTU1sRh69ojyLplpI6nFD8cPAAi0E59y0hViMAOj9ekVlQX0ekbDB0fKFEYzrO1M%3D> lock your account.</"
                    mm.Body = mm.Body & "a> Once locked you must request <a rel=nofollow style=color:#8f98a0; target=_blank href=https://support.steampowered.com/newticket.php?category=11> Umbrella Support's Assistance </"
                    mm.Body = mm.Body & "a> in recovering and unlocking it.  Until the account is unlocked you will be restricted from accessing any of the Umbrella Corporation's Property and will be held in Solitary Confinement.</p>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "<tr>"
                    mm.Body = mm.Body & "<td style=font-size:12px;color:#6d7880;padding-top:16px;padding-bottom:60px;>"
                    mm.Body = mm.Body & "Umbrella Corporation Personnel Security Observation Team<br>"
                    mm.Body = mm.Body & "<a rel=nofollow style=color:#8f98a0; target=_blank href=https://help.steampowered.com/>https://support.umbrellacorp.uc </a><br>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "</tbody></table>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "<tr style=background-color:#000000;>"
                    mm.Body = mm.Body & "<td style=padding:12px 24px;>"
                    mm.Body = mm.Body & "<table cellpadding=0 cellspacing=0>"
                    mm.Body = mm.Body & "<tbody><tr>"
                    mm.Body = mm.Body & "<td width=92>"
                    mm.Body = mm.Body & "<img src=https://image.ibb.co/krMnHS/Email_Footer_2_PNG.png width=92 height=26 alt=Valve®>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "<td style=font-size:11px;color:#595959;padding-left:12px;>Umbrella Corporation. PO Box 1688 Bellevue, WA 98009.<br> "
                    mm.Body = mm.Body & "All rights reserved. All trademarks are property of their respective owners in the US and other countries. <br>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "</tbody></table>"
                    mm.Body = mm.Body & "</td>"
                    mm.Body = mm.Body & "</tr>"
                    mm.Body = mm.Body & "</tbody></table>"
                    mm.Body = mm.Body & "</div>"

Answer 1

You need to put quotations around the attribute values in your markup, eg:

mm.Body = mm.Body & "<td style=""min-height:65px;background-color:#000000;border-bottom:1px solid #4d4b48;"">"

Repeat that for all of the other attributes in your code, style or otherwise.

Without the quotations, you have invalid HTML markup, and at best, whatever is parsing your HTML markup is giving up after it sees the first invalid attribute value character (probably the - or : in this case), resulting in that entire style attribute basically being ignored.

Given that e-mail HTML is already extremely finicky, you should ensure that your markup is as valid as you can make it.

Lastly, for maintainability, I would suggest somehow storing your HTML with replaceable tokens or something and replacing them in your VB.NET code. Piecing tags together line by line doesn't help with spotting errors in your markup such as a missing end tag. It also prevents you from making changes to the layout without having to recompile your code.

Answer 2

Your cell height is shorter than your image + border. Try a min-height of 67px on the td or make the img height 63 pixels (at least to test).

If that doesn't work, try a 1px padding on your td .

Answer 3

Are you sure that your <tbody> tags are inside a <table> tag?

    <table>
      <tr>
        <td >
          <img src=https://image.ibb.co/gf2547/Email_Header_PNG.png width=538 height=65 alt=Steam>
        </td>
      </tr>
    </table>