Too much margins/padding in the bulleted list in Gmail

In gmail, the bulleted lists is too far to the right. This is after I've set the margins and padding of "ul li" to 0. What else would I be missing?

BThies BThies, 6 years ago

When setting a bulleted list to zero left, certain clients like Outlook will lose the bullets, while gmail will still display bullets.

Is that the issue you're experiencing?  If not, could you post the exact code you're using to set the margins and padding?


Brian Thies
Professional Email Developer
Thies Publishing
hdean, 6 years ago

Brian- No, it's just that in Gmail, the lists indents too far to the right than it should based on the margins/paddings I set.

Here's the site: http://www.tuvel.com/email-newsletter/newsletter-feb.html

I'm trying to adjust the Sightings and Industry lists. Here's the code:

table#bottom ul {margin: 10px 0 10px 0px; padding:0; text-align:left;}
table#bottom ul li, td.col2 ul li {font-size:13px; line-height:140%; text-align:left;}

table#industry td ul, table#sightings td ul {margin:10px 0 0 0px; padding:0;}
table#industry td ul li, table#sightings td ul li {font-size:12px; list-style-type:disc; color:#000; line-height:150%;}
table#industry td ul li a, table#sightings td ul li a {color:#012345; text-decoration:underline; margin:0; padding:0;}
table#industry td ul li a:hover, table#sightings td ul li a:hover {color:#033a63; text-decoration:underline; margin:0; padding:0;}

BThies BThies, 6 years ago

Ahh, it looks like you're moving the bullets into negative space to align the text with the image, but unfortunately Gmail will not go any further.

The best solution is to recreate the bullet list using a table, in which you'll need to add an additional left column to each row of your main tables.

If that doesn't make sense I can provide code.


Brian Thies
Professional Email Developer
Thies Publishing
hdean, 6 years ago

Yes, that would be very helpful,Brian. I'm so used to CSS that table based is actually still new to me!

The temporary solution that I made was to declare margins and padding via inline styles to the 'ul' . But it sounds like using a simple table would be even easier and minimize the hassle of declaring inline styles to both ul and ul li?

BThies BThies, 6 years ago

Give this a try:

*** Note: You'll need to change your images to GIF or JPG format, as PNG is not fully supported ***

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuvel Communications</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#FFFFFF" align="center"><table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="580"><div align="left" style="font-size:10px; color:#000000; font-family:Arial,Helvetica,sans-serif">Visit us at <a href="http://www.tuvel.com" style="color:#ff9900; text-decoration:underline;">http://www.tuvel.com</a></div>
                  <div style="font-size:10px;">&nbsp;</div>
                  <div align="left" style="font-size:10px; font-family: Arial,Helvetica,sans-serif">View <a class="permission" href="http://www.tuvel.com/email-newsletter/newsletter-nov.html" style="color:#ff9900; text-decoration:underline;">in a browser</a>To unsubscribe, <a href="http://tuvel.us1.list-manage.com/unsubscribe?u=5db9ef897a&id=eecce37f56&e=*|UNIQID|*" style="color:#ff9900; text-decoration:underline;">click here.</a></div>
                  <div style="font-size:10px;">&nbsp;</div></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="580"><img src="http://tuvel.com/email-template/images/banner.png" alt="tuvel communications" width="580" height="100" border="0" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="370" valign="middle" align="left"><div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; color:#000000;">Name</div>
                  <div style="font-size:13px; line-height:16px;">&nbsp;</div>
                  <div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; color:#000000;">Welcome to the latest issue of the <strong>Tuvel Talks</strong> e-newsletter!</div>
                  <div style="font-size:13px; line-height:16px;">&nbsp;</div>
                  <div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; color:#000000;">Through this e-publication, we bring you news, views and company information that you can apply to your marketing efforts. Please <a href="http://www.tuvel.com/contact/" style="color:#1e6fa7;" target="_blank">let us know</a> what you think. A big shout-out to Tuvel's latest additions! Kari Rippetoe, Jason Rouse, Kalin Tyler and Brian Li are working on various client engagements. You can find out more about them <a href="http://www.tuvel.com/about" style="color:#1e6fa7;" target="_blank">here</a>. Check out how Wainger Group/Tuvel is using social media to drive the Internet conversation for the Robert Wood Johnson Foundation in our latest <a href="http://www.tuvel.com/case-studies/the-robert-wood-johnson-foundation" style="color:#1e6fa7;" target="_blank">case study</a>. While you're at it, read our latest <a href="http://www.prweb.com/releases/2010/02/prweb3591104.htm" style="color:#1e6fa7;" target="_blank">press release</a> to see how our social-media experts are helping organizations build audiences for their events.</div>
                  <div style="font-size:13px; line-height:16px;">&nbsp;</div>
                  <div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:16px; color:#000000;"><a href="http://www.tuvel.com/contact/" style="color:#1e6fa7;">Contact us today</a></div></td>
                <td width="10">&nbsp;</td>
                <td width="200" valign="top"><div style="font-size:16px; line-height:20px;">&nbsp;</div>
                  <img src="http://tuvel.com/email-template/images/get-connected.png" alt="get connected" width="200" height="22" border="0" style="display:block;" />
                  <div style="font-size:6px; line-height:6px;">&nbsp;</div>
                  <table width="200" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td width="11"></td>
                      <td width="52"><a href="http://www.facebook.com/mitch.arnowitz"><img src="http://tuvel.com/email-template/images/icons-fb.png" alt="facebook" width="49" height="49" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                      <td width="52"><a href="http://friendfeed.com/mitcharno"><img src="http://tuvel.com/email-template/images/icons-ff.png" alt="friendfeed" width="50" height="50" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                      <td width="52"><a href="http://www.linkedin.com/in/tuvel"><img src="http://tuvel.com/email-template/images/icons-li.png" alt="linkedin" width="50" height="50" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                    </tr>
                    <tr>
                      <td width="11"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="52"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="11"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="52"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="11"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="52"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                      <td width="11"><div style="font-size:8px; line-height:12px;">&nbsp;</div></td>
                    </tr>
                    <tr>
                      <td width="11"></td>
                      <td width="52"><a href="http://feeds.feedburner.com/Tuvel"><img src="http://tuvel.com/email-template/images/icons-rss.png" alt="rss" width="49" height="50" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                      <td width="52"><a href="http://mitchelllll.stumbleupon.com/favorites/"><img src="http://tuvel.com/email-template/images/icons-su.png" alt="stumbleupon" width="47" height="49" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                      <td width="52"><a href="http://twitter.com/mitcharno"><img src="http://tuvel.com/email-template/images/icons-tw.png" alt="twitter" width="51" height="50" border="0" style="display:block;" /></a></td>
                      <td width="11"></td>
                    </tr>
                  </table>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div>
                  <img src="http://www.tuvel.com/email-newsletter/images/dc-events.png" alt="DC Events" width="126" height="26" style="display:block;" />
                  <div style="font-size:7px; line-height:10px;">&nbsp;</div>
                  <table width="200" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td width="20" valign="top"><div align="center" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                      <td width="180" valign="top"><div align="left" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://blog.dctechevents.com/" style="color:#1e6fa7">DC Tech Events. Ross Karchner's geeky-goings-on in and around DC</a></div></td>
                    </tr>
                    <tr>
                      <td width="20" valign="top"><div align="center" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                      <td width="180" valign="top"><div align="left" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://netpreneur.org/calendar/calendar.cfm" style="color:#1e6fa7">Netpreneur Calendar</a></div></td>
                    </tr>
                    <tr>
                      <td width="20" valign="top"><div align="center" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                      <td width="180" valign="top"><div align="left" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.capitolcommunicator.com/Calendar.aspx" style="color:#1e6fa7">Capitol Communicator</a></div></td>
                    </tr>
                    <tr>
                      <td width="20" valign="top"><div align="center" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                      <td width="180" valign="top"><div align="left" style="font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://dc.garysguide.org/" style="color:#1e6fa7">Gary's Guide</a></div></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="580" align="left"><img src="http://www.tuvel.com/email-newsletter/images/industry-news.png" alt="Industry News" width="359" height="24" border="0" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><div style="font-size:7px; line-height:10px;">&nbsp;</div>
            <table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://knowledgeflows.org/blog/?p=43" style="color:#1e6fa7">Google Wave, Twitter, and The Transformation of Event Marketing</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.npr.org/templates/story/story.php?storyId=122893909" style="color:#1e6fa7">Social Media Among Haiti's First Responders</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://mackcollier.com/three-steps-to-saving-your-company-from-a-social-media-firestorm/" style="color:#1e6fa7">Three steps to saving your company from a social media firestorm!</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://mashable.com/2010/01/26/maturation-social-media-roi/" style="color:#1e6fa7">The Maturation of Social Media ROI</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.buzzmachine.com/2010/02/09/googles-buzzmachine/" style="color:#1e6fa7">Google's Buzz (machine)</a></div></td>
              </tr>
            </table>
            <div style="font-size:7px; line-height:10px;">&nbsp;</div></td>
        </tr>
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="580" align="left"><img src="http://www.tuvel.com/email-newsletter/images/sightings.png" alt="Sightings" width="359" height="24" border="0" style="display:block;" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><div style="font-size:7px; line-height:10px;">&nbsp;</div>
            <table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.nabshow.com/2010/email/ShowSmart/LandingPage/ShowSmart_issue2.html#4" style="color:#1e6fa7">Myth: Social media is Facebook and Twitter.</a></div>
                  <div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.nabshow.com/2010/email/ShowSmart/LandingPage/ShowSmart_issue2.html#4" style="color:#1e6fa7">Truth: Social media is web forums, e-mail lists, video, photo sharing,</a></div>
                  <div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.nabshow.com/2010/email/ShowSmart/LandingPage/ShowSmart_issue2.html#4" style="color:#1e6fa7">wikis, social networking and social bookmarking.</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.nabshow.com/2010/email/ShowSmart/LandingPage/ShowSmart_issue1.html#4" style="color:#1e6fa7">Myth: Build it and they will come.</a></div>
                  <div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.nabshow.com/2010/email/ShowSmart/LandingPage/ShowSmart_issue1.html#4" style="color:#1e6fa7">Truth: Success in social media requires relationship building and time!</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://community.icontact.com/p/associationseminar/newsletters/archive/posts/meeting-marketing-email-marketing-social-media-and-more/content#article2" style="color:#1e6fa7">Crucial Keys to Driving Event Traffic Through the Use of Social Media</a></div></td>
              </tr>
              <tr>
                <td width="20" valign="top"><div align="center" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7">&bull;</div></td>
                <td width="580" valign="top"><div align="left" style="font-size:13px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#1e6fa7"><a href="http://www.mitcharnowitz.com/2010/01/there_is_no_doubt_about_it_200.htm" style="color:#1e6fa7">There is no doubt about it, 2009 was...</a></div></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="600"><table width="600" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="20"></td>
                <td width="580"><div style="font-size:7px; line-height:10px;">&nbsp;</div>
                  <div align="left" style="font-size:13px; line-height:16px; font-family:Arial, Helvetica, sans-serif; color:#000000"><strong>What We Do</strong></div>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div>
                  <div align="left" style="font-size:13px; line-height:16px; font-family:Arial, Helvetica, sans-serif; color:#000000">Tuvel Communications is helping organizations and companies use new ways to get their messages out and find customers. Through our efforts, clients have been able to increase sales efforts, drive event traffic, fundraise, prospect, and get closer to their customers.</div>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div>
                  <div align="left" style="font-size:13px; line-height:16px; font-family:Arial, Helvetica, sans-serif; color:#000000">For more information, check out <a href="http://www.tuvel.com/services/social-media-marketing-services" style="color:#1e6fa7">Tuvel's Social Media Marketing Services</a>. <a href="http://www.tuvel.com/contact/" style="color:#1e6fa7">Contact us</a> for information on how you can put a Tuvel Communications program to work for your company or organization. Want to stop receiving this newsletter? No problem! Just <a href="http://tuvel.us1.list-manage.com/unsubscribe?u=5db9ef897a&id=eecce37f56&e=*|UNIQID|*" style="color:#1e6fa7">click here</a> or let us know.</div>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div>
                  <div style="font-size:12px; line-height:16px;">&nbsp;</div></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098