I am writing some html to go in a mail to be sent to internal users programatically. They all use Outlook 2016. (Coding for Outlook is horrific, as simple things like CSS backgrounds don't work. As such I'm stuck with coding html like it's the 90's.)
The content is kind of a flowchart, and it needs to be visible in the mail client as the users won't bother clicking a link to take them to an external page. As it is Outlook I am doing everything with tables. Basically, everything graphical is a table cell, but I need to add arrowheads. i have done this by coloring the background of the cell and "capping it" with a white on transparent arrowhead cutout.
I'm pretty much there, except for a really annoying bug where on some, but not all of the arrows, there is a 1px line to the left of the arrowhaed. (The ones in the picture with red arrows pointing to them.)
My arrowhead image is the same width as 2 x my column width, and the code is as follows to make a row with 2 arrowheads (I'm using 36 columns, as the design is based on a 12 column grid, but then I need to be able to split down cells further in order to make the arrows):
<tr>
<td class='blank' colspan=8></td><td class='shaft' colspan=2>Y</td><td class='blank' colspan=8></td>
<td class='blank' colspan=8></td><td class='shaft' colspan=2>N</td><td class='blank' colspan=8></td>
</tr>
<tr>
<td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
<td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
</tr>
And the relevant CSS is shown here:
td {
background-color: #82d0f5;
height: 48px;
border-right: 6px solid white;
padding: 6px;
word-break: break-all;
}
td.blank {
background-color: white;
padding:0;
height: 24px;
}
td.shaft {
background-color: #82d0f5;
padding: 0px;
vertical-align:bottom;
height: 24px;
border-left: 1px solid white;
}
img {
width:100%;
display:block;
}
How do I get rid of the troublesome line on the left?