title: Email with anchor link doesn't work on gmail, and indexed my "#" link?
body: <p>I am designing an e-newsletter with an effect <a href="http://truffc.bugs3.com/demo.html" rel="nofollow">like this</a> per my client's instructions.</p>
  
  <p>I know there is no way to use javascript in an email, so I've tried to make it in a stupid way, using <code>overflow:hidden</code> and anchor tags. When I click the appropriate link, the hidden image will scroll up to the visible area. Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;demot&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .OF {
      display:block;
      max-height: 100px;
      overflow: hidden;
      white-space:nowrap;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- Save for Web Slices (News_Letter_artwork.jpg) --&gt;
  &lt;table id="Table_01" width="595" height="434" border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;
              &lt;img src="images/News_Letter_artwork_01.jpg" width="595" height="155" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="display:block;"&gt;
          &lt;td&gt;
              &lt;img src="images/News_Letter_artwork_02.jpg" width="50" height="37" alt=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;A href="#tab_01"&gt;&lt;span&gt;&lt;font&gt;&lt;img src="images/News_Letter_artwork_03.jpg" width="118" height="37" alt=""&gt;&lt;/font&gt;&lt;/span&gt;&lt;/A&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;A href="#tab_02"&gt;&lt;span&gt;&lt;img src="images/News_Letter_artwork_04.jpg" width="118" height="37" alt=""&gt;&lt;/span&gt;&lt;/span&gt;&lt;/A&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;A href="#tab_03"&gt;&lt;span&gt;&lt;img src="images/News_Letter_artwork_05.jpg" width="121" height="37" alt=""&gt;&lt;/span&gt;&lt;/span&gt;&lt;/A&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img src="images/News_Letter_artwork_06.jpg" width="188" height="37" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="display:block; max-width: 595px; max-height: 186px; overflow: hidden; white-space:nowrap;"&gt;
          &lt;td colspan="5"&gt;
              &lt;h2&gt;&lt;a name="tab_01" id="tab_01"&gt;&lt;/a&gt;&lt;/h2&gt;&lt;img src="images/News_Letter_artwork_07.jpg" width="595" height="186" alt=""&gt;&lt;p&gt;
              &lt;h2&gt;&lt;a name="tab_02" id="tab_02"&gt;&lt;/a&gt;&lt;/h2&gt;&lt;img src="images/News_Letter_artwork_07b.jpg" width="595" height="186" alt=""&gt;&lt;p&gt;
              &lt;h2&gt;&lt;a name="tab_03" id="tab_03"&gt;&lt;/a&gt;&lt;/h2&gt;&lt;img src="images/News_Letter_artwork_07c.jpg" width="595" height="186" alt=""&gt;&lt;p&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;
              &lt;img src="images/News_Letter_artwork_08.jpg" width="595" height="56" alt=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Concerning most of client won't support in div tag, so I've tired to use table to make it, actually, everything's work in browser, but the <code>&lt;a&gt;</code> tag's <code>href</code> will be replaced in email client from <code>#tab_01</code> to <code>http://mydomain/news.html#tab_01</code>.</p>
  
  <p>When I click it on email client, it opens a new browser window which is not at all what I want. Is it possible to be fixed? </p>
  
  <p>Here's my sending email procedure:</p>
  
  <ol>
  <li>Upload whole website to server</li>
  <li>Open the page</li>
  <li>Select all and Copy</li>
  <li>Paste to compose windows, and send.</li>
  </ol>
  
  <p>Have I done anything wrong? I've tested Gmail, Hotmail (outlook.com), Yahoo, Apple mail, Outlook 2011 for Mac.</p>