How do I style an e-mail hyperlink to display using Razor in ASP.Net MVC3?

Question

HTML <a href="mailto:[email protected]"> [email protected] </a> works as normal in an MVC 3 View - except that the display is invisible - white text on a white background and if I mouse over it I see the e-mail address that's "displayed" isn't underlined.

So, I tried adapting George's answer at MailTo link in Razor to

`@helper EmailTextBox(string email, string title) {
    <a href="mailto:@email">@title</a>    
    }

and

@EmailTextBox("[email protected]", "[email protected]") (both in a view)

and this also works - also generates an e-mail message with the e-mail address pre-populated like a normal HTML e-mail hyperlink - except that the display is still invisible - white text on a white background and if I mouse over it I see it also isn't underlined.

Applying a style to the containing tag doesn't work.

So, how can I apply a style to get the e-mail address to display (or is there perhaps some other method)?

Answer 1

Sounds like a css issue, try seeing what styles are applied to this tag (right click -> inspect element in Chrome, Firefox with the firebug extension, etc.)

You can always override the style being applied with something like

<style>
  a {
    color : black !important;
  }
</style>

But it would be much better to find out what rule is causing the color in the first place.

---

EDIT

I have not worked with the razor view engine in MVC, always keep in mind that this is emitting html, anything you can do in html should be achivable. Make good use of Firebug or equivalent to view what html you are generating.

I would be very surprised if you could not do

`@helper EmailTextBox(string email, string title) {
    <a class="email" href="mailto:@email">@title</a>    
    }

then

 <style>
   a.email {color:black;}
 </style>

But it really sounds like you should make the rule turning links white much more narrow.