Hi,

Trying to get my navbar to look like this:

in outlook 2010 and 2013 this is how it looks:

in all other clients it looks ok.

Here's my code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td style="mso-line-height-rule: exactly; line-height:20px;">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr align="center" class="navbar-row">
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text">NEW IN</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text">OFFERS</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text hide-border-right">TOPS</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text">BOTTOMS</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text">DRESSES</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttdnav" align="center">
              <div data-type="text">
                <a href="#">
                  <p class="navbar-text hide-border-right">MATERNITY</p>
                </a>
              </div>
            </th>
            <th class="hide pipe">|</th>
            <th class="contenttd" align="center">
              <div data-type="text">
                <a class="navbar-item" href="#">
                  <p class="navbar-text-sale">SALE</p>
                </a>
              </div>
            </th>
          </tr>
        </table>
      </td>
    </tr>
    <tr height="4">
      <td class="navbar-bottom-padding empty-padding" height="4">
        <div> &nbsp; </div>
      </td>
    </tr>
    </table>

CSS:

.navbar-text {
          font-family: 'Helvetica', sans-serif;
          font-size: 13px;
          text-align: center;
        }

        .navbar-text-sale {
          color: #ed1c24;
          font-size: 13px;
          text-align: center;
        }

        .navbar-bottom-padding {
          border-bottom: 1px solid #bebebe
        }

        .empty-padding {
          font-size: 1px
        }

        .outer-text {
          color: #8c9194;
          font-size: 10pt;
          font-family: 'Helvetica', sans-serif;
        }

        .pipe {
          color: #bebebe;
          font-size: 10pt;
          font-family: 'Helvetica', sans-serif;
          font-weight: lighter;
        }

        table td {
          border-collapse: collapse;
        }

Any help will be appreciated! Thank you!