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, 8 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.

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