Clearing rollover

[markgodley]

Hey,

I've just created this site:
www.diane-miller.co.uk

But on the contact page (www.diane-miller.co.uk/contact.html) its holding the values i set for the top navigation. Any idea how to clear it so i can assign new values just for the email address (you will see when you roll over it)

thanks


CSS:
.nav {
background:#8D8D8D none repeat scroll 0 0;
border:0px solid;
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:15px;
padding-left:1px;
padding-right:1px;
padding-top:3px;
padding-bottom:3px;
position:relative;
text-align:right;
top:0;
margin-left:auto;
margin-right:20px;
width:705px;
}

body {
background:url(../images/greybackground.jpg) no-repeat #8D8D8D;
}
.page {
background-color:#8D8D8D;
width:773px;
}
.maincontent {
bottom:0;
color:#FFFFFF;
float:right;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
left:0;
margin:0;
margin-right:20px;
width:473px;
position:relative;
right:0;
text-align:right;
top:20px;
border:0px solid;
}
a:link {
border-color:#8D8D8D;
border-style:solid;
border-width:1px 7px;
color:#FFFFFF;
text-decoration:none;
}

h1 {
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
color:#FFFFFF;
font-weight: bold;
}
a:visited {
border-color:#8D8D8D;
border-style:solid;
border-width:1px 7px;
color:#FFFFFF;
text-decoration:none;
}
a:hover {
background-color:#FFFFFF;
border-color:#FFFFFF;
border-style:solid;
border-width:1px 7px;
color:#000000;
text-decoration:none;
}
a:active {
border-color:#8D8D8D;
border-style:solid;
border-width:1px 7px;
color:#8D8D8D;
text-decoration:none;
}

.footer {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFFFFF;
text-align: left;
padding: 0em;
position:relative;
width: 400px;
top:550px;
margin-left: 1px;
margin-right: auto;
border:0px solid;
}

.bottom {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
position:relative;
width: 250px;
top:550px;
padding: 0px;
border:0px solid;
margin: auto;
}

h3 {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#8D8D8D;
font-weight: bold;
}

.email {
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
color:#FFFFFF;
font-weight: bold;
}

 

[Darth.Titan]

Because you didn't set the :hover background for just the top navigation, you did it for all <a> tags. Since the email link is an <a> tag it is picking it up as well. Specify that the css you want for the nav links only applies to the <a> tags that are in the .nav div and then it will leave the email link alone.

.nav a {
border-color:#8D8D8D;
border-style:solid;
border-width:1px 7px;
color:#FFFFFF;
text-decoration:none;
}
.nav a:hover {
background-color:#FFFFFF;
border-color:#FFFFFF;
border-style:solid;
border-width:1px 7px;
color:#000000;
text-decoration:none;
}

 

[markgodley]

many thanks, works a treat.