SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member goldndog's Avatar
    Join Date
    Dec 2008
    Location
    Charming village in Cambridgshire England
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    EMAIL ISSUE: Unordered list not working in Outlook 2007

    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. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
             <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>


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

    This list is approved for Outlook 2007.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Member goldndog's Avatar
    Join Date
    Dec 2008
    Location
    Charming village in Cambridgshire England
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Outlook 2007 is only 42&#37; 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">

    <p style="font: 12px Arial, Verdana, Helvetica, sans-serif; color: #e3cd9a;">
    <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>

    </td>

    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!!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •