Set asp hyperlink colors and hover color RRS feed

  • Question

  • With the hyperlink that follows, is it possible to set a hover or active color, etc.?

    <asp:HyperLink id="Home" runat="server" NavigateUrl="Default.aspx" Font-Underline="False" ForeColor="#000000" Font-Names="Verdana, Geneva, Tahoma, sans-serif" Font-Size="Small">Home</asp:HyperLink>

    I intend to use this in place of asp menu which does not sem to be working well with iphones and ipads. 

    Tuesday, August 14, 2012 4:30 AM

All replies

  • Why not use a standard link?
    Tuesday, August 14, 2012 4:46 AM
  • It is on a master page.

    I did try using a standard links but they did not seem to work correctly.

    Prehaps I should try again?

    Tuesday, August 14, 2012 4:54 AM
  • I think I may have solved this problem using standard links.

    Since each page linked to is in a different directory, I had to add a forward slash "/" in front of each href EW3 gave me. For example:

    <a href="/Sustainability/Sustainability.aspx">Sustainability</a>

    instead of

    <a href="Sustainability/Sustainability.aspx">Sustainability</a>

    Tuesday, August 14, 2012 5:36 AM
  • They won't work on a master page if content pages are in different directories and you use relative URLs.  The URLs will be parsed as relative to the content page, not the master page.  They will work if you use root-relative links:  href="/default.aspx", or href="/about/contact.aspx"

    Your hyperlink control example won't work in different directories, either, by the way: "Default.aspx" will be relative to the content page's directory.  Use application root links in controls: NavigateUrl="~/Default.aspx" (assuming Default is in the root of your site), or NavigateUrl="~/about/contact.aspx" if you had a contact page in an about folder under the root of your site

    As for styling: look at the source that the browser sees when a page has an hyperlink control on it.  It's rendered as an HTML link.  Create styles the same way you would for an HTML link, by styling the "a" (link) element and its :hover (and other) states.

    If you don't need to use an control for other reasons (making changes to it in code behind, for example), it's easiest to stick to a standard link, as long as you specify the href's correctly to work in a master page.

    Tuesday, August 14, 2012 5:54 AM
  • Well, we cross posted.  :)
    Tuesday, August 14, 2012 5:56 AM
  • Rather than put all of that in each asp:hyperlink use regular css and either apply it ot the hyperlink using cssclass="classname" or if the links are in div such as <div id="menu">link, link, link</div> simply use a descendent selector of:

    #menu a {color: #000; text-decoration: none; font-size=".85em"}

    Your font family should be inherited so unless you are using a different font for your links it doesn't need ot be specified. I changed font-size from "small" to .85em for better cross browser consistency in my example. Be careful about mixed case hyperlinks. While Windows servers aren't case sensitive for file names everything else in is - attribute, class names and variables so it pays to be extra careful.

    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try

    Tuesday, August 14, 2012 5:41 PM