Home/ Questions/Q 9001913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:30:00+00:00

First of all, this is for email, so I can’t put css in the

  • 0

First of all, this is for email, so I can’t put css in the head, only in the table, td, ul, etc.

I’ll paste my code snippet and screenshots of what it looks like in IE, Firefox, and MS Outlook.

            <html>
             <head>
             </head>
             <body>
              <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
                 <tr bgcolor=#FF8100 valign="top">
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
                 </tr>
                 <tr bgcolor=#FFCA99 valign="top">
                   <td>Review
                   </td>
                   <td> 
                     <ul style="margin: 0px 0px 0px 15px;">
                      <li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
                      <li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
                     </ul>
                   </td>
                 </tr>
                </table>
               </body>
              </html>

It looks great in IE, but in Firefox there’s a huge margin, and in Outlook, only a tiny part of the bullet is showing.

IE:

IE View

Firefox:

FF View

Outlook:

Outlook View

I have to assume the audience is likely to use all of these options to view this email, so how can I make it look good universally? I tried putting the padding in the ul style, I tried making a bullet image, using that as the li background image, and giving ul no style… that didn’t work either. Everything I try looks horrible on at least 2 out of the 3 email views.

I’d really appreciate the help!

(Gmail is the strictest on what css will be interpreted, so I have to follow their rules. Those can be found here -> http://www.campaignmonitor.com/css/ You can see that Gmail on Android won’t allow list-style-x, so I can’t use any of them. I can only use the ones with all green check marks.)

Thanks!
-Holly

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simply resetting the padding/margins on the ul and li went pretty far! Thanks @keeg!

    With this code:

          <html>
     <head>
     </head>
     <body>
      <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
         <tr bgcolor=#FF8100 valign="top">
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
         </tr>
         <tr bgcolor=#FFCA99 valign="top">
           <td>Review
           </td>
           <td style="padding-left:25px;"> 
             <ul style="padding:0px;margin:0;">
              <li style="padding:0px;margin:0;">Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
              <li style="padding:0px;margin:0;">Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
             </ul>
           </td>
         </tr>
        </table>
       </body>
   </html>

    It looks like this in IE, Firefox, and Outlook (in that order from top to bottom), which isn’t perfect because of Outlook’s view of it, but much more acceptable:

    With resetting

    • 0