I'm creating an HTML newsletter and I need to show some empty anchor links with specified height, width and block-level display, but Gmail seems to remove empty <a> links, so I put in links and it works like a charm but it renders as - character.
I checked both Mozilla Firefox and Google Chrome and the problem exists in both browsers. Any ideas?
Code Sample:
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="42" width="49" style="height: 42px; width: 49px"></td>
<td height="42" width="123" style="height: 42px; width: 123px">
<a href="http://www.youtube.com/user/adsf" style="display: block; height: 42px; width: 123px"> </a>
</td>
<td height="42" width="79" style="height: 42px; width: 79px">
<a href="http://asdf.asdf.dsf" style="display: block; height: 42px; width: 79px"> </a>
</td>
<td height="42" width="129" style="height: 42px; width: 129px">
<a href="https://www.facebook.com/asdfasdf" style="display: block; height: 42px; width: 129px"> </a>
</td>
<td height="42" width="111" style="height: 42px; width: 111px">
<a href="https://twitter.com/adfdasff" style="display: block; height: 42px; width: 111px"> </a>
</td>
<td height="42" width="269" style="height: 42px; width: 269px"></td>
</tr>
</tbody>
</table>
In fact, it has nothing to do with Gmail. The problem exists in my HTML project too.
I imagine the problem is that the space is underlined, like a link normally would be. You would have to set text-decoration to stop this.
As it is an HTML newsletter, I presume you want to do this inline:
<a style="text-decoration: none;"> </a>