EMAIL ISSUE: Unordered list not working in Outlook 2007

Get Started
1

Not sure if this belongs in the Web page forum but I could not find the email forum. Maybe it would be wise to start one.

I am not as familiar with writing CSS and XHTML code for emails as I am for web pages.

I do not even know how to approach creating a horizontal list that actually works in Outlook 2007 and Notes. The mailing list primarily Microsoft Outlook.

I have read where the list-style position, type and image all not supported.

Is there a work around?

I cannot post the URL since I am a new user. Sorry. I cannot paste a link to the site or put in the code because I am a new user.

Here is the style sheet info if that helps anyone.
td.footer {background: #5a245a;
border-top: 5px #ce8e00 solid;
height: 38px; text-align: center;}

td.footer ul {
padding: 0;
margin: 0;
display: inline;
}

td.footer li {display: inline;
list-style: none;
margin: 0; }

td.footer li a {font: 12px Arial, Verdana, Helvetica, sans-serif;
color: #e3cd9a;
padding: 0 10px;
border-right: thin #e3cd9a solid; }

td.footer li a:link {
text-decoration: none; }

td.footer li a:visited {
text-decoration: none; }

td.footer li a:hover {color: #ce8e00;}

td.footer li.address {font: 11px Arial, Verdana, Helvetica, sans-serif;
color: #e3cd9a;
padding: 0 10px;}

I have read where I should not link to an external style sheet but to put the styles inline. It works. But I guess I should do that.

Everything works fine except in Outlook 2007. In Outlook 2007 The bulleted list in the footer.

Thanks

2 
           
         <ul id="goldndog">
<li><a href="0" height="0" width="0" alt="image"></li>
<li><a href="0" height="0" width="0" alt="image"></li>
<li><a href="0" height="0" width="0" alt="image"></li>
<li><a href="0" height="0" width="0" alt="image"></li>
<li><a href="0" height="0" width="0" alt="image"></li>
</ul>


#goldndog li
{
display: inline;
list-style-type: none;
padding-right: 15px;
text-decoration:none;
}

This list is approved for Outlook 2007. :slight_smile:

3

Outlook 2007 is only 42% compliant with web standards.
It does not support the following CSS properties along with many others:
display
List-style-position
List-style-type
list-style-image
width
height
top
e:active and e:hover

There is a great spread sheet produced by campaignmonitor called: Guide_to_CSS_Support_in_Email_2008.

I originally had the following HTML: (took out the links so I could post it)

<ul>
<li><a href=“#” target=“_blank”>PRIVACY</a></li>
<li><a href=“#” target=“_blank”>CUSTOMER SERVICE</a></li>
<li><a href=“#” target=“_blank”>UNSUBSCRIBE</a></li>
<li><a href=“#” target=“_blank”>CONTACT US</a></li>
<li class=“address”>600 New Hampshire Avenue, NW, Washington, DC 20037 </li>
</ul>

With the following CSS
The red is not compliant in Outlook 2007

td.footer {background: #5a245a;
border-top: 5px #ce8e00 solid;
height: 38px; text-align: center;}

td.footer ul {
padding: 0;
margin: 0;
display: inline;
}

td.footer li {display: inline;
list-style: none;
margin: 0; }

td.footer li a {font: 12px Arial, Verdana, Helvetica, sans-serif;
color: #e3cd9a;
padding: 0 10px;
border-right: thin #e3cd9a solid; }

td.footer li a:link {
text-decoration: none; }

td.footer li a:visited {
text-decoration: none; }

td.footer li a:hover {color: #ce8e00;}

td.footer li.address {font: 11px Arial, Verdana, Helvetica, sans-serif;
color: #e3cd9a;
padding: 0 10px;}

So I changed it to this: UNBELIEVABLE that I am writing inline style sheets. But guess what it still does not work! The padding between the links. At least I have a horizontal list and not a vertical list.

<td class=“footer”>

&lt;p style="font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a;"&gt;

<a style=“font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a; padding: 0 13px; text-decoration: none;” href=“#”_blank" class=“footer”>PRIVACY</a><a style=“font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a; padding: 0 13px; text-decoration: none;” href=“#”>CUSTOMER SERVICE</a>

<a style=“font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a; padding: 0 13px; text-decoration: none; “#” target=”_blank">UNSUBSCRIBE</a>

<a style=“font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a; padding: 0 13px; text-decoration: none;” href=“#” target=“_blank”>CONTACT US</a>

600 New Hampshire Avenue, NW, Washington, DC 20037 </p>

&lt;/td&gt;

I am hoping that someone has dealt with this before.
Sorry I cannot put links here because I have less than 10 posts.

Forgot to mention that alt tags are also not supported in Outlook 2007!!!