Alex Banerjee Alex Banerjee - 9 days ago 5
CSS Question

How to align bullet points in html5 email

I'm trying to create align bullet points in my html5 email to be level with the header but as you can see it's indenting them in and making lots of space. I have removed the padding from the but I think outlook is blocking it because it looks fine on Iphone and Mac's mail.

I have put 2 photos below so you can take a look and also a snippet of code



<ul><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We put you in front of millions of buyers through our huge advertising presence.</li>
<p><br> <li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Get matched to the perfect buyer through our vast database, looking for businesses just like yours!</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We don’t just do ‘off the shelf’ advertising! Ask us what we can do to sell your business.</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We sell businesses because buyers and sellers alike trust us. As we say, no fluff, no false promises and no egos!</li>
</p><br>
<li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Optional video presentations and for sale boards give you maximum curb appeal and
exposure!</li>
<p><br> <li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;">Regular updates on the progress of your sale.</li>
</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> Worried about confidentiality? We will handle the sale of your business according to your specific needs.</li>

</p><br><p><li><span style="color: #000000; font-family: Arial,sans-serif; font-size: 14px; line-height:17px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"> We include <a href="" target="_blank">all-inclusive legal fees</a> when you sell the assets of your business (we cannot
include the legal fees on a share sale). We do this so that you know exactly what the cost to
sell will be at the beginning.</li>
</p></ul>



Working
Not working

Answer

If I remember correctly, you are limited because you are using HTML email. I don't know specifics on these limitation, but assuming:

  • Can't use external stylesheets
  • Can't use JavaScript
  • Not sure if <style> blocks are prohibited or not
  • Inline styles (style attribute is only way to style).
  • Tables are commonly used in layout, and even the The League of Semantic Overlords can't gripe about it.

Changes

  • Ripped out everything but the content and a few core styles.
  • Replaced list with a table:
<table style="color: #000000; font-family: Arial,sans-serif; font-size: 14px;
  line-height:1.5; table-layout:fixed; border-collapse:collapse;">...</table>
  • The table is 2 columns the 1st column is populated like this:
<th style="padding-right:.5em">•</th>
  • This column uses <th>, by default they centered horizontally and vertically their content so there's hardly any adjustments, just a .5em padding on the right.

UPDATE

OP requested that the bullets be oriented to the beginning of the content in the vertical direction:

<td style="padding-right:.5em;vertical-align: text-top;">•</td>  

The left column now has <td> instead of <th> because defaults are are easier to handle from a <td>. Added vertical-align: baseline, which is a hard default.

SNIPPET

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>00A00</title>
</head>
<body>
<table style="color: #000000; font-family: Arial,sans-serif; font-size: 14px;line-height:1.5; table-layout:fixed; border-collapse:collapse;">
<tbody>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We put you in front of millions of buyers through our huge advertising presence.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Get matched to the perfect buyer through our vast database, looking for businesses just like yours!</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We don’t just do ‘off the shelf’ advertising! Ask us what we can do to sell your business.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We sell businesses because buyers and sellers alike trust us. As we say, no fluff, no false promises and no egos!</td></tr>

  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Optional video presentations and for sale boards give you maximum curb appeal and exposure!</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Regular updates on the progress of your sale.</td></tr>
  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>Worried about confidentiality? We will handle the sale of your business according to your specific needs.</td></tr>

  <tr><td style="padding-right:.5em;vertical-align: text-top;">•</td><td>We include <a href="" target="_blank">all-inclusive legal fees</a> when you sell the assets of your business (we cannot include the legal fees on a share sale). We do this so that you know exactly what the cost to sell will be at the beginning.</td></tr>
  </tbody>
  </table>

</body>
</html>

Comments