A ver... no me queda claro que quieres hacer. Principalmente me confunde la oración del comienzo "Necesito hacer que un link a un mail sea clickeable". Si es un LINK ya es clickable, no tienes que hacer anda para que lo sea. Por otro lado, el segundo código que posteaste es totalmente valido. Es horrible, pero es válido.
Lo que quieres hacer es un enlace a un mail, pero que en vez de texto sea una imagen? si es así: solo necesitas utilizar el siguiente código HTML:
Despúes por CSS hacés algo como:
Código HTML:
.email-contact {
background: url(/tu/imagen.gif) no-repeat;
display:block;
height:32px; <-- alto de la imagen
text-indent:-9999px;
width:32px; <-- ancho de la imagen
}
Por ahí, por el contexto en el que tienes ese enlace, el display:block tengas que cambiarlo por un float:left o alguna otra variante. Pero esa es la forma simple (y correcta) de hacer convertir un enlace de texto en una imagen linkeada.