Hotmail <ul> <li> background color issue

Hi there...I am creating an email template for a company and am having an issue in hotmail styling an <ul> with background colors/images for an <li>. 

I wanted to make a nice looking list of links using an <ul> along the left hand side of the template.  My template is nothing but a big table and I created a class for the <td> which contains styles for the <ul> and <li>.

I created a style to give the <li> a background image and/or color for clients not supporting background images...

Here are my styles for the <ul> and <li>

td.left_nav ul {padding: 0; margin:0;}
td.left_nav ul li {list-style-type:none;text-align:center;background: #3568b7 url(PATH TO BG IMAGE) repeat-x top left;margin:10px 0;padding: 4px 0 ;}
td.left_nav li a {text-decoration: none;color:#fff;font-size:12px;}

I even tried this all inline, in case somehow the fact that I was using a class to apply the styles was the issue..no dice:(

Here is what the list should look like:
http://nielsfogt.web.aplus.net/htmlemails/correct_ul_li.jpg

Here is how it comes out:
http://nielsfogt.web.aplus.net/htmlemails/hotmail_ul_li.jpg

Any feedback is appreciated!

zapatoche, 7 years ago

You should apply the background color inline on every <li> element otherwise it won't work in Gmail or email client with no support for css in the <head>

i tried the following code and it work in hotmail

<ul>
            <li style="padding: 20px; margin-bottom: 4px; background: #E3DD54;">test
            </li>
            <li style="padding: 20px; margin-bottom: 4px; background: #E3DD54;">test
            </li>
            <li style="padding: 20px; margin-bottom: 4px; background: #E3DD54;">test
            </li>
        </ul>

I believe that hotmail doesn't support element.classname {} but only element {} or .classname {}

Hope it help.

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