CODEWITHSUNDEEP
htmlhtml-emailemail-signature
Bec
Bec

Reputation: 1

HTML code for removing lines when using slices for email signature that has multiple hyperlinks

My email signature has a black line showing at the top and bottom, it has slices as it has multiple hyperlinks. I've added a background colour so you can't see the lines between the slices, but it is now showing a line at the top and bottom of the signature. I only have basic html knowledge. Any help would be appreciated. Code used below:

<head>
<title>Header</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Header.png) -->
<table id="Table_01" width="600" height="183" border="0" cellpadding="0" cellspacing="0" bgcolor="#131016">
    <tr>
        <td width="546" height="183" rowspan="2">
            <a href="https://www.example.com"></a><img src="images/Header_01.jpg" width="546" height="183" alt=""></td>
        <td width="54" height="162" colspan="3">
            <a href="https://www.example.com"></a><img src="images/Header_02.jpg" width="54" height="162" alt=""></td>
        <td width="0" height="162" nowrap></td>
    </tr>
    <tr>
        <td width="17" height="21">
            <a href="https://www.example.com"></a><img src="images/Header_03.jpg" width="17" height="21" alt=""></td>
        <td width="17" height="21">
            <a href="https://www.example.com"></a><img src="images/Header_04.jpg" width="17" height="21" alt=""></td>
        <td width="20" height="21">
            <a href="https://www.example.com"></a><img src="images/Header_05.jpg" width="20" height="21" alt=""></td>
        <td width="0" height="21" nowrap></td>
    </tr>
    <tr>
        <td bgcolor="#131016" width="546" height="0" nowrap></td>
        <td bgcolor="#131016" width="17" height="0" nowrap></td>
        <td bgcolor="#131016" width="17" height="0" nowrap></td>
        <td bgcolor="#131016" width="20" height="0" nowrap></td>
        <td bgcolor="#131016" width="0" height="0"></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

I've tried adding a background colour which fixes the lines showing where the slices are but now shows a black line at the top and bottom.

Upvotes: 0

Views: 25

Answers (1)

Ray Wallace
Ray Wallace

Reputation: 1639

You need to set the vertical-align style on your img elements.

The default is to place images on the text baseline, which leaves room for descenders on text. Setting it to bottom works in some instances, I find that top does what I want more often. Ether seems to give the right effect in this case.

<!-- Save for Web Slices (Header.png) -->
<table id="Table_01" width="600" height="183" border="0" cellpadding="0" cellspacing="0" bgcolor="#131016">
    <tr>
        <td width="546" height="183" rowspan="2">
            <a href="https://www.example.com"></a><img src="https://placebear.com/100/100.jpg" width="546" height="183" alt=""></td>
        <td width="54" height="162" colspan="3">
            <a href="https://www.example.com"></a><img src="https://placebear.com/101/100.jpg" width="54" height="162" alt=""></td>
        <td width="0" height="162" nowrap></td>
    </tr>
    <tr>
        <td width="17" height="21">
            <a href="https://www.example.com"></a><img src="https://placebear.com/102/100.jpg" width="17" height="21" alt=""></td>
        <td width="17" height="21">
            <a href="https://www.example.com"></a><img src="https://placebear.com/103/100.jpg" width="17" height="21" alt=""></td>
        <td width="20" height="21">
            <a href="https://www.example.com"></a><img src="https://placebear.com/104/100.jpg" width="20" height="21" alt=""></td>
        <td width="0" height="21" nowrap></td>
    </tr>
    <tr>
        <td bgcolor="#131016" width="546" height="0" nowrap></td>
        <td bgcolor="#131016" width="17" height="0" nowrap></td>
        <td bgcolor="#131016" width="17" height="0" nowrap></td>
        <td bgcolor="#131016" width="20" height="0" nowrap></td>
        <td bgcolor="#131016" width="0" height="0"></td>
    </tr>
</table>

<style>
  img {
    vertical-align: bottom;
  }
</style>

Upvotes: 0

Related Questions