Gmail list (li) spacing nightmare!!!!

I'm trying everything I know to remove the left indent space on a bulleted list.  It works fine on everything EXCEPT Gmail.  Here is a copy of my code (li css at top of page).

Thanks for any help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#main {
    width: 100%;
}
body {
    background-color: #81BC3D;
}
.table1 {background-color:#FFFFFF;}

.left_right_main {width: 10px;}
    
li
{margin-left: -22px !important; padding-left: -22px !important;}
    
.center_divider {width: 20px; background-image:url(images/center.gif); background-repeat:repeat-y;}

.left_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;}

.right_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left: 12px;}

h2 {font-size:16px; font-family:Arial, Helvetica, sans-serif; color: #1C3F95;}

.permission {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; padding-right: 24px; background-color: #ffffff;}
.permission2 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; background-color: #ffffff;}
a:link {
    color: #04715B;
}
a:visited {
    color: #04715B;
}
a:hover {
    color: #04715B;
}
a:active {
    color: #04715B;
}

.fb {width: 55px;}
.twit {width: 55px;}
.centerline {width: 3px !important; background-color:#000099;}
-->
</style>
</head>

<body>
<div id="main" align="center"><table width="640" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="10" class="left_right_main">&nbsp;</td>
    <td colspan="2" class="permission">&nbsp;</td>
    <td width="55">&nbsp;</td>
    <td width="55">&nbsp;</td>
    <td width="11" class="left_right_main">&nbsp;</td>
  </tr>
  <tr>
    <td class="left_right_main">&nbsp;</td>
    <td width="447" class="permission"><webversion>View In Web Browser</webversion></td>
    <td width="62" class="permission2"><forwardtoafriend lang="en"><img src="images/forward.jpg" width="60" height="22"></forwardtoafriend></td>
    <td class="fb"><fblike></fblike></td>
    <td class="twit"><tweet></tweet></td>
    <td class="left_right_main">&nbsp;</td>
  </tr>
</table>
</td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_HEADER.jpg" width="640" height="249"></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><table width="640" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="10" class="left_right_main">&nbsp;</td>
          <td width="300" align="left" valign="top" class="left_col_content"><repeater>
 <h2 align="left">
  <singleline label="Title" repeatertitle='true' >Title</singleline>
 </h2>
 <multiline label="Article Body" >Enter the full text</multiline>
</repeater></td>
<td width="11" class="centerline">
</td>
          <td width="308" align="left" valign="top" class="right_col_content"><repeater>
 <h2 align="left">
  <singleline label="Title" repeatertitle='true' >Title</singleline>
 </h2>
 <multiline label="Article Body" >Enter the full text</multiline>
</repeater></td>
          <td width="11" class="left_right_main">&nbsp;</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="center" valign="top" class="table1"><img src="images/NU_FOOTER.jpg" width="640" height="230"></td>
    </tr>
    <tr>
      <td align="right" valign="top" class="permission"><unsubscribe>Unsubscribe</unsubscribe></td>
    </tr>
    <tr>
      <td align="left" valign="top" class="permission">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
Redferret, 2 years ago

Hi torweb, have you confirmed this works in Outlook 2007+? I know that it has issues with negative margins on bullets, just a thought.

Where gmail is concerned, negative margins aren't going to work. You're best bet is to replicate the list with tables. I find &#9679; to be the best bullet character.


Gmail app apologist
torweb, 2 years ago

Using a negative margin moves the list flush left with all email clients except for Gmail.  I know I can tell the client to use &#9679; to replace the list (li) but that seems like a lot of work for a client that's not HTML savy.

There must be some way to use the css to make this happen.

roshodgekiss roshodgekiss, 2 years ago

Hi torweb, I just ran a test and found that negative margins were being stripped from the code altogether in Gmail. However, if you use the following, you'll find that bullet points are flush left with the content:

ul, li { padding-left: 0; }

See: http://cl.ly/image/2w3S163H1m3v

Thanks, torweb - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 2 years ago

Thanks roshodgekiss.  That fixed it for Gmail however all of the other email apps now have the bullets right against the border of the page.  The css I used before fixed that.

Is there a way of having a conditional line of css to handle this based of if it's Gmail or not..

Thanks again

roshodgekiss roshodgekiss, 2 years ago

Hey there torweb, we were doing some research on conditional CSS for targeting Gmail today, actually. Kindly try:

div[id*=":"] ul, li { padding-left: 0; }

Notes on this fix: It targets Gmail, but not Google Apps, as attribute selectors are supported in the former, but not the latter. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 2 years ago

Thanks roshodgekiss.   Do I need to change anything in the above and is it a stylesheet element.

Thanks
Tom

Redferret, 2 years ago

This has me confused, I was always under the impression that CSS (not inline) doesn't work at all in gmail as it strips the  style tags completely


Gmail app apologist
torweb, 2 years ago

Well, it's quite a mess, this Gmail.  I'm a little unsure how to use this code: div[id*=":"] ul, li { padding-left: 0; }  Don't know if I need to add a div or use as is.  I did put it between my style tags, which didn't seem to do anything.

Hoping to here more about this.

Redferret, 2 years ago

it's a CSS selector, so it needs to go in style tags, try putting style in the body?


Gmail app apologist
torweb, 2 years ago

I tried that Redferret...not luck. I can't believe there isn't a way to remove the big indent on bulleted list as they appear in Gmail.

Calling all Campaign Monitor Gurus...help is needed!  My client backing away from my solutions towards something else...

Help!

Redferret, 2 years ago

Ok I've got it! Ros was almost right but the padding in Gmail is set on the ul not the li so putting

div[id*=":"] ul{
padding-left: 0px;
}

in your style will solve the issue!


Gmail app apologist
torweb, 2 years ago

Thanks very much Redferret...but no luck.  I'm about done with this as I don't think CM has an answer (if they did I hear back by now) I guess Gmail wins this battle.  Using li in Gmail will look ugly so I will need to "instruct" my client on how to switch to "code" mode and insert &#8226; to make a bullet in front of each line they want to format. Booooo!  Here is a copy of my style code to make sure I'm not missing something...I hope I am :-(

<style type="text/css">
<!--
#main {
    width: 100%;
}
body {
    background-color: #81BC3D;
}
.table1 {background-color:#FFFFFF;}

.left_right_main {width: 10px;}
    
li { margin-left: -23px; }

div[id*=":"] ul {padding-left: 0px !important;}

.left_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-right: 18px;}

.right_col_content {width: 300px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left: 12px; padding-right: 18px;}

h2 {font-size:16px; font-family:Arial, Helvetica, sans-serif; color: #1C3F95;}

.permission {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; padding-right: 24px; background-color: #ffffff;}
.permission2 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#273A67; font-weight:bold; background-color: #ffffff; }
a:link {
    color: #04715B; text-decoration:none; 
}
a:visited {
    color: #04715B;
}
a:hover {
    color: #04715B;
}
a:active {
    color: #04715B;
}

.fb {width: 55px;}
.twit {width: 55px;}
.centerline {width: 3px !important; background-color:#000099;}
img { outline: none; text-decoration: none; display: block; float:left; padding-right: 10px;}
-->
</style>
roshodgekiss roshodgekiss, 2 years ago

Hi there torweb, sorry to hear that you didn't have any luck with this, but then again, this Gmail vs. Google Apps rendering difference has me wondering what's going on with Gmail's "flavours". Really excited that we're pooling our observations in regards to Gmail's rendering in this thread, so perhaps worth looking there for other potential workarounds.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
torweb, 2 years ago

Thanks for the link...I'll keep looking.

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