List element text indent within a table

Question

So I'v been looking online for a while now and haven't found a solution, I have a table for an email I'm creating and I have list elements inside the table. What I'm trying to do is have the text indent aligned instead of having the text underneath the bullet point, example:

No

• Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Yes

• Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

I understand that normally this would work if you simply add: list-style-position:outside; to the css but as this is in the table it needs to be list-style-position:inside; or else the list appears outside of the table.

My code so far:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="3" bgcolor="#FFFFFF">
  <tr>
    <td width="50%" height="30px" align="center" valign="middle" bgcolor="#2A7AD2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff"><strong>Xxxxxxxxxxxxxxxx</strong></span></td>
    <td width="50%" align="center" valign="middle" bgcolor="#2A7AD2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff;"><strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong></span></td>
  </tr>
  <tr>
    <td width="50%" height="30px" align="left" valign="middle" colspan="2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email..co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" height="30px" align="left" valign="middle" colspan="2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
</table>

Please understand that as this is an email I have added the css within the tag obviously.

Answer 1

The problem is that you overrided the default 40px of padding-left of an <ul> ;

Just remove your padding declarations (and all the declarations that are altering the default <ul> mechanisms), and it will works.

PS: try to avoid inline styling