So Gmail did an update on the 11th (http://www.androidapksfree.com/apk/gmail-apk-latest-download-for-android/).

And from this point forward the text in my navigation has been getting larger on open - this seems like the normal gmail issue that I rectified when I built the templates. So Gmail is making the text larger to accomodate the space which it thinks its not taking advantage of. This results in a navigation bar with what looks like one giant word. (HOMENEWFOOTWEARMENSWOMENS etc...)

I can't find any update notes online or anything of the sort - why would Google do a gmail update and not make anyone aware of what it is exactly that they've done? I've tested this in Litmus and it shows up displaying fine, but when I test the email on an iPhone or android I get this issue.

Now I managed to get it working by adding some styles in the header (weird right?) so gmail now applies an !important font size to the navigation relative to its actual size, it comes out a little smaller than others but it's okay. Now this fixes the issue on gmail and as it's in the head it's not affecting outlook. Now if I was to place an important tag on the inline styles it stops outlook doing its thing and makes the text massive.

So this rectifies the issue on one of my templates(kind of), but on my other template I'm experiencing the exact same thing although the templates are built in the same way, just styled differently.

Here's a minified version of my code: 


    <html>
    <head>
    <style>
    td[class="nav"], td[class="nav-small"] {
        font-size:12px !important;
    }
    td[class="full-a"] {
        font-size:14px !important;
    }
    </style>
    </head>

    <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing:antialiased; width:100% !important; min-width:100% !important; background:#ffffff; -webkit-text-size-adjust:none; text-align:center">

    <table width="600" class="full" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed; width:600px; min-width:300px!important;">
      <tr class="gmail-fix">
        <td><table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
            <tr>
              <td cellpadding="0" cellspacing="0" border="0" height="1" style="line-height: 1px; min-width: 600px;"><img src="images/master/spacer-long.gif" width="600" height="1" alt="" style="display: block; max-height: 1px; min-height: 1px; min-width: 600px; width: 600px;"/></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td><!-- MAIN-WRAP --> 
          <!-- PRE HEADER -->

          <table width="600" class="full" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="middle" align="center" style="font-family: Arial, sans-serif; font-size: 0px; color:#ffffff; line-height:0px;">Get summer ready with all your holiday fashion must haves and beach essentials</td>
            </tr>
          </table>

          <!-- /PRE HEADER -->

          <table width="600" class="full" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="middle" align="center" style="font-family: Arial, sans-serif; font-size: 11px; color:#a7a7a7; line-height:15px; padding-bottom:10px; padding-top:10px;">Can&#39;t see any images&#63; <a style="color:#a7a7a7; text-decoration:underline;" xt="SPCLICKTOVIEW" href="#SPCLICKTOVIEW" target="_blank">View this email online</a></td>
            </tr>
          </table>
          <table width="100%" height="72" cellpadding="0" cellspacing="0" border="0">
            <!-- HEADER -->
            <tr>
              <td width="370" class="full" align="center" valign="middle"><a href="#" target="_blank" name="Nav-logo"><img src="images/master/sw_logo.jpg" alt="#" width="370" class="full" style="max-width:370px; display:block; border:none;" /></a></td>
              <td width="230" class="displaynone">&nbsp;</td>
              <td width="150" class="displaynone" align="right" style="padding-right:10px; font-family: Arial, sans-serif; text-decoration:none; line-height:16px; font-size:12px; font-weight:normal; color:#333333;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; line-height:16px; font-size:12px; color:#333333;"><strong>Log in</strong></a><br>
                <a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; line-height:16px; font-size:12px; color:#333333;">My Account</a></td>
            </tr>
          </table>

          <!-- /HEADER -->

          <table bgcolor="#38b2e4" width="600" class="full"  height="40" cellpadding="0" cellspacing="0" border="0">
            <!-- NAVIGATION -->
            <tr>
              <td width="11%" class="nav-small" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" class="nav-small" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-home"><strong>HOME</strong></a></td>
              <td width="9%" class="nav-small" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" class="nav-small" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-bikinis"><strong>BIKINIS</strong></a></td>
              <td width="15%" class="nav" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-tankinis"><strong>TANKINIS</strong></a></td>
              <td width="18%" class="nav" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-mixandmatch"><strong>MIX &amp; MATCH</strong></a></td>
              <td width="15%" class="nav" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-swimsuits"><strong>SWIMSUITS</strong></a></td>
              <td width="20%" class="nav" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-cruisewear"><strong>CRUISEWEAR</strong></a></td>
              <td class="nav-small" bgcolor="#df3e2c" width="12%" align="center" valign="middle" style="padding-top:12px; padding-bottom:12px;"><a href="#" target="_blank" class="nav-small" style="font-family: Arial, sans-serif; text-decoration:none; font-size:12px; line-height:18px; font-weight:normal; color:#ffffff;" name="Nav-sale"><strong>SALE</strong></a></td>
            </tr>
          </table>
             <!-- Gmail width fix -->

          <table class="displaynone" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" valign="top" width="300"><a href="#" target="_blank"><img src="images/master/spacer.gif" width="300" border="0" alt="" style="display: block;" /></a></td>
              <td align="center" valign="top" width="300"><a href="#" target="_blank"><img src="images/master/spacer.gif" width="300" border="0" alt="" style="display: block;" /></a></td>
            </tr>
          </table>

          <!-- /Gmail width fix --> 
          </td>
            </tr>
          </table>
          </body>
          </html>

Thanks if you get this far, even if you don't have a fix any advice or ideas would be amazing!

Thanks