CODEWITHSUNDEEP
htmlcsshtml-tablereset
Niels Sanders
Niels Sanders

Reputation: 1

Table height exceeds image

In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.

It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!

For starters I want to create a signature like this:

I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.

As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this... 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
  <style>
    table, td, tr {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}

table {
    width: 400px;
}

img {
    padding: 0;
    margin: 0;
}

#Avatar {
    width: 80px;
    height: 80px;
}

#Whitespace {
    width: 2px;
}

#BlueBar {
    width: 6px;
    background-color: #0CF;
    margin: 20px;
}

</style>
</head>

<body>
<table>
  <tr>
    <td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td rowspan="3" id="BlueBar">&nbsp;</td>
    <td rowspan="3" id="Whitespace">&nbsp;</td>
    <td>Tekst</td>
  </tr>
 <tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>

Upvotes: 0

Views: 435

Answers (1)

Harry Ronchetti
Harry Ronchetti

Reputation: 116

in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.

A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here (PDF link).

Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.

Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.

In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:

<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
            style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
            background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >

Also for all images use a tag like below and define the width and height in HTML NOT CSS.

<img src="" alt="" width="" height="" style="display: block; border: none;"/>

Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!

Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!

Finally use ONLY Inline styles, many clients strip anything in a head tag out!

Upvotes: 1

Related Questions