asked on

ASP.net Apply unique style to email address

Hi

On the Contact page of the site www.airdata.co.za I use the following markup for two email addresses.
The problem is that these two links are affected by the gradient style that affects the whole site (See Site.Master
site further down). How do I give these email addresses their own unique style so as to override the gradient style.
I don't want a gradient blue background and want the full email address to show for each. Thanks

    <address>
        <strong>Support:</strong><a href="mailto:support@airdata.co.za" >Support@airdata.co.za</a><br />
        <strong>Marketing:</strong><a href="mailto:sales@airdata.co.za">Sales@airdata.co.za</a>
    </address>

Open in new window

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="Air_Data_Website.Site1" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8" />
    <title>Microsoft Excel Spreadsheet Consulting | Excel Macros | Excel VBA</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.slider img:gt(0)').hide();
            setInterval(function () { $('.slider :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slider'); }, 4000); /*5 sec*/
        });
    </script>
    <style type="text/css">
	.slider { clear:both; position:relative; height:280px; width:90%; }
	.slider img { position:absolute; left:0; top:0;cursor:pointer; }
    </style>

    <style>

        .div{
            background-color: white;
            }
       .div:hover{
            background-color: whitesmoke;
             }
    </style>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

 <!--The classes contained in the style tags are purely for the horizontal navigation bar-->
<style>


  ul 
  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color:white;
    background: linear-gradient(to bottom, lightskyblue,navy); 
    text-align: center;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-family:'Arial Rounded MT'
}

a:hover, a:active {
    background: linear-gradient(to bottom, lightskyblue,black); 
    text-align: center;
}
#grad1  {
                color:blue;
                background: linear-gradient(to bottom, lightskyblue,navy);
                padding: 20px
           }
#grad2  {
                color:blue;
                background: linear-gradient(to bottom, lightskyblue,navy);
           }
</style>

</head>


<body>
        <!-- Note The grid1 class is picked up from the Site.Master-->
     <div id="grad1">
              <div class="slider" style="margin:0 auto;">
                <img src="Slide_Images/1.jpg" />
                <img src="Slide_Images/2.jpg" />
                <img src="Slide_Images/3.jpg" />
                <img src="Slide_Images/4.jpg" />
                <img src="Slide_Images/5.jpg" />
      
            </div>
     </div>
    <div>
        <!--The ContentPlaceHolder area is used by the other pages to merge their content with the master page-->
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
  <nav id="grad2">
    <ul>
      <li><a href="Default.aspx" class="myHoverButton">Home</a></li>
      <li><a href="About.aspx" class="myHoverButton">About</a></li>
      <li><a href="Contact.aspx" class="myHoverButton">Contact</a></li>         
    </ul>
  </nav>
    <form id="form1" runat="server">
    <div>
        <!--The ContentPlaceHolder area is used by the other pages to merge their content with the master page-->
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Murray Brown

ASKER

Thanks very much

Julian Hansen

You are welcome.