bulleted list in gmail doesn't adhere to stylesheet

Hi all- I can't get the bulleted list to render it's appropriate color in gmail. Here is the markup below. The live version can be seen here in my browser.

The problem is that the links shows up in orange type of color when it is supposed to be in white. The same goes for the h2 header. It shows up in purple when it should be blue. It looks fine in Yahoo mail

<table cellspacing="0" id="box-blue" style="background-color:#1e6fa7; width:580px; height:230px; margin:0; padding:0;">
        <td width="280" valign="top" style="text-align:left;">
            <h2 style="font-size:13px; font-weight:bold; margin:0; padding:0;">Case Studies- What We Do For Our Clients</h2>
            <ul style="margin:10px 0 0 10px; list-style-position:inside;">
            <li><a class="link" href="http://www.tuvel.com/case-studies/1105"><strong>1105 Government Information Group:</strong> Using Social Media to Drive Tradeshow Traffic</a></li>
            <li><a href="http://www.tuvel.com/case-studies/national-association-of-broadcasters"><strong>National Association of Broadcasters:</strong> Using Social Media to Build Business Relationships and Drive Tradeshow Traffic</a></li>
            <li><a href="http://www.tuvel.com/case-studies/share-our-strength"><strong>Share Our Strength:</strong> Using Social Media to Combat Childhood Hunger</a></li>
            <li><a href="http://www.tuvel.com/case-studies/case-study-tech-council-of-maryland"><strong>Tech Council of Maryland:</strong> Social Media Outreach Helps Win Repeal of Computer Services Sales Tax</a></li>

And here is stylesheet for that

table#box-orange td ul li a, table#box-blue td ul li a {color:#fff; text-decoration:underline; margin:0; padding:0; line-height:150%;}
BThies BThies, 8 years ago

Hi hdean,

Few things to keep in mind:

First, List-style-position is not compatible with Outlook 2007, Lotus 6.5 and Lotus 7.  You'll need to insert a spacing cell to manufacture the indent you're looking for.

Second, Margins are not recognized in Hotmail (all browsers), and won't display correctly in Lotus 6.5, 7, and sometimes Outlook 2007 depending on how it's coded.

Finally, Gmail only supports inline styles.  If for some reason the "move CSS styles inline" option isn't reading it correctly, Gmail will display incorrectly.

Looks like some alignment issues still need to be corrected as well within the boxes, but I didn't know if you were finished designing it yet.

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

Thanks Brian. Regarding #3, what do you mean the "move inline CSS" isn't supported? What's 'move'?

Are margins recognized in gmail? because based on the screen capture below, the margins are pushed to far to the right. I set my margins for ul li to 10px only

screen capture of gmail rendering

BThies BThies, 8 years ago

If you're using list-style-position with a margin, it may be pushing it too far over.

Not all email clients display list-style-position the same, and the rendering of lists can be different from client to client as well.  I rarely if ever use lists, resorting to using nested tables to form the list look.  It ensures the best compatibility and consistency.

As far as moving the css inline, using campaign monitor's e-mail upload tool, there's a checkbox with "Move a copy of my CSS inline  (recommended for the best results in Gmail, Outlook 2007 and Lotus Notes)".  This will take the CSS you have in your <style> tag and copy it to the body tags (just as if you'd coded it inline from the start).

If you're using a 3rd party tool to deploy your e-mails and they don't have this feature, you'll need to code everything inline from the start.

Brian Thies
Professional Email Developer
Thies Publishing

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free