0

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. enter image description here

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?

1

This is really more of a guess without the entire code...

td {
    background-color: #82d0f5;
    border-right: 6px solid white;
}

There's a right border and a blue background for all cells.

td.blank {
    background-color: white;
}       

Still has the default right border, but the background is now white.

td.shaft {
    background-color: #82d0f5;
    border-left: 1px solid white;
}

Still has the default right border and blue background, but now there's also a left border changing the width of these cells.

So your table cells are not the same widths. You could add a left border to all cells so that all cells have both the left and right border and you merely then change the colors. You could use box-sizing but I doubt that's supported in Outlook.

I'd also suggest quoting all attributes for Outlook. The lack of quotes was something browsers learned to adapt to, but they created issues before browsers caught up. I wound't be surprised if the lack of quotes caused issues in Outlook.

You might also consider adding border="none" to the images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.