SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem viewing the ul for my newsletter in gmail/outlook

    This newsletter is working perfectly for me in the browser window when I view it as a html. However when I viewed the tested mail in Gmail and Outlook the ul list just under the header and all the content in this td were a bit of a mess after showing perfect in the browser.

    Any ideas on how I can fix this. Here's the code below:

    the area and text seems to expand for some reason and goes out of shape in the email applications

    --------------------------------------------------------

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type ="text/css">
    body {
    background-color: #eeeeee;
    }

    a img {
    border: none;
    }

    table.bg1 {
    background-color: #eeeeee;
    }

    table.bg2 {
    background-color: #ffffff;
    }

    td.permission {
    background-color: #eeeeee;
    padding: 10px 20px 10px 20px;
    }

    td.permission p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    padding: 0;
    }

    td.permission p a {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    }

    td.body {
    padding: 0;
    background-color: #ffffff;
    }

    td, img { vertical-align: bottom; }

    td ul.nav{
    margin:0;
    padding:2;
    }

    td ul.nav li a{
    color:white;
    text-decoration:none;
    }

    td ul.nav li a:hover{
    color:white;
    text-decoration:underline;
    }


    td.sidebar h3 {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    margin: 0;
    padding: 0;
    }

    td.sidebar ul {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    margin: 6px 0 14px 24px;
    padding: 0;
    }

    td.sidebar ul li a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.sidebar h4 {
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    color: #680606;
    margin: 6px 0 0 0;
    padding: 0;
    }

    td.sidebar h4 a {
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    color: #680606;
    text-decoration: none;
    }

    td.sidebar p {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 10px 0;
    padding: 0;
    }

    td.sidebar p a {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #680606;
    text-decoration: none;
    }

    td.buttons {
    padding: 20px 0 0 0;
    }

    td.mainbar h2 {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    color: #680606;
    margin: 0;
    padding: 0;
    }

    td.mainbar h2 a {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    color: #680606;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }
    /*
    td.mainbar img.hr {
    margin: 0;
    padding: 0 0 10px 0;
    }
    */

    td.mainbar p {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 14px 0;
    padding: 0;
    }

    td.mainbar p a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.mainbar p.more a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    text-decoration: none;
    }

    td.mainbar ul {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    /*margin: 0 0 14px 24px;*/
    margin:0;
    padding: 0;
    }

    td.mainbar ul li a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.footer {
    padding: 0 20px 0 20px;
    background-color: #696969;
    height: 61px;
    /* vertical-align: middle; */
    }

    td.footer p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #ffffff;
    line-height: 16px;
    margin: 0;
    padding-top: 10px;
    }
    /*
    td.footer p.lower{
    padding-bottom: 10px;
    }
    */

    </style>
    </head>
    <body>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center">

    <table width="550" border="0" cellspacing="0" cellpadding="0" class="bg2">
    <tr>
    <td class="permission" align="left" colspan = "2">
    <p>Not interested anymore? <unsubscribe>Unsubscribe</unsubscribe>. Having trouble viewing this email? <a href="#">View it in your browser</a>.</p>
    </td>
    </tr>

    <tr>

    <td colspan = "2" cellpadding = "0" cellspacing="0" height="74"> <img src="slices/images/fathersday_01.gif" alt="Header" width="550" height="74" style = "vertical-align: bottom;" />
    </td>
    </tr>


    <tr>

    <td colspan = "2" height="20" style = "font-size:12px; background-color:black; color:white; ">
    <ul class = "nav">
    <li style = "display:inline; list-style-type: none; padding-left:20px;
    padding-right: 12px; "><a href = "# ">LCD's</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px; "><a href = "# ">Media Players</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px; "><a href = "# ">MP3's</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px;"><a href = "# ">PDA/smartphones</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px; "><a href = "# ">Laptop/Desktops</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px; "><a href = "# ">More</a></li>
    <li style = "display:inline; list-style-type: none;
    padding-right: 12px;"><a href = "# ">Contact Us</a></li>
    </ul>
    </td>
    </tr>





    <tr>

    <td colspan = "2" cellpadding = "0" cellspacing="0" height="291"> <img src="slices/images/fathersday_slice_02.jpg" alt="jawbone bluetooth headset" width="550" height="291" />
    </td>
    </tr>

    <tr>

    <td cellpadding = "0" cellspacing="0" height="220"> <img src="slices/images/fathersday_slice_03.jpg" alt="palm centro" width="275" height="220" />
    </td>
    <td cellpadding = "0" cellspacing="0" height="220">
    <img src="slices/images/fathersday_slice_04.jpg" alt="archos 605 wifif" width="275" height="220" />
    </td>
    </tr>

    <tr>

    <td cellpadding = "0" cellspacing="0" height="220"> <img src="slices/images/fathersday_slice_05.jpg" alt="creative mp3" width="275" height="220" />
    </td>
    <td cellpadding = "0" cellspacing="0" height="220"> <img src="slices/images/fathersday_slice_06.jpg" alt="ipod speaker dock" width="275" height="220" />
    </td>
    </tr>

    <tr>

    <td colspan = "2" cellpadding = "0" cellspacing="0" style = "padding-bottom: 10px;"><img src="slices/images/fathersday_slice_07.jpg" alt="follow us on twitter" /></a>
    </td>
    </tr>




    <tr>
    <td valign="middle" align="left" class="footer" height="61" colspan = "2">




    </td>
    </tr>
    </table>

    </td>
    </tr>
    </table>


    </body>
    </html>

    ---------------------------------------------------------

  2. #2
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS doesn't have widespread support in email. Your browser isn't a great preview tool for them, and it'll look different in nearly every client (hotmail, gmail, outlook, yahoo...)

    Your best bet for this list is to make a table with one row and put the items in <td>s

  3. #3
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The SitePoint podcast mentioned a great tool for e-mail testing in one of the recent episodes:
    http://litmusapp.com/


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
  •