: Why is my img leaving a 1px unfilled space in a table cell? 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
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?
More posts by @Karen819
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.