AH0
Apple Devices Make 1px Line Thicker
Within my email I have a 1 pixel transparent pixel acting as a seperator between 2 pieces of copy. I have given the td a background colour. The line is rendering perfectly except on Apple devices, where the line appears thicker. I have used the code below. Has anybody experienced this and does anybody know a work around? Thank you.
<tr>
<td>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td height="1" align="center" style="background-color:#BEBDBD; padding-left:40px; padding-right:40px; line-height:1px; font-size:1px;">
<img src="images/trans_pix.gif" height="1" alt=" " class="splitter">
</td>
</tr>
</table>
</td>
</tr>
Hi James, maybe you could put this on litmus builder and share with us, so we can see your css too? or maybe share a test?
Hi Marc,
Thank you for your reply. I've just fixed it!
I'm not 100% sure what changes fixed it but I did the following I) Removed the table 2) Set the border to 0 3) Put display block on the image
This code is now working
No problem, I'm glad you've fixed this :) I make things a little different (as we all do) and would just put padding on one element(non responsive email, responsive padding can just be stripped) like so: https://litmus.com/builder/d392859
I would't really recommend using transparent spacer images. There are a lot of people that still read email with images off. Use a span.
<td class="spacer20" bgcolor="#fefefe" width="1"><span></span></td>
(the class in this example expands the spacer to 20px on mobile devices via css) If the width is wider than 5px you can add a between the span tag. Keep in mind that anything less the 10px will look different in your editor than it will when rendered.