EBay HTML Description Element Looks Different When Previewing

Question

I have the following code for the description header of an eBay element, and it looks good when I put it in , but then the links change color in the preview of the list .

What do I need to change to keep the links black?

thanks in advance

Here is the code:

CSS code

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<title>DR Automation</title>
<style type="text/css">
.main {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: normal;
background-color: #fff;
}
a {
color: #000000;
text-decoration: none;
}
a:focus, a:hover {
color: #cc0000;
text-decoration: none;
}
.nav {
float: left;
line-height: 20px;
letter-spacing: 1px;
color: #000000;
height: 20px;
padding: 0;
margin: 0 15px;
cursor: pointer;
text-decoration: none;
}
ul {
padding: 0;
margin: 23px 0;
list-style: outside none;
}
li {
margin: 12px 0;
}
.header {
width: 100%;
height: 120px;
border-bottom: 1px solid #9b9b9b;
}
.logo {
float: left;
display: inline-block;
position: relative;
width: initial;
max-width: 200px;
max-height: 120px;
padding: 10px 20px 0px 0px;
margin: 0;
vertical-align: middle;
}
.navigation {
height: 120px;
float: left;
position: relative;
display: inline-block;
line-height: 120px;
vertical-align: top;
text-align: left;
}
.list {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
padding: 20px 0;
margin: 30px 0;
vertical-align: middle;
display: inline;
}
.contact {
height: 80px;
float: right;
position: relative;
display: inline-block;
padding: 20px;
}
.contact-item {
position: relative;
float: left;
padding: 10px;
margin-top: 20px;
vertical-align: middle;
display: inline;
}
</style>

HTML code

<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.drautomation.co.uk/" target="_blank"><img style="height: 110px;" alt="DR Automation" src="http://i.imgur.com/qqdzWy4.png"></a>
</div>
<div class="navigation">
<ul class="list">
<li class="item">
<a class="nav" href="https://www.drautomation.co.uk" target="_blank">Home</a>
</li>
<li class="item">
<a class="nav" href="/pages/about-us" target="_blank">About Us</a>
</li>
</ul>
</div>
<div class="contact">
<div class="contact-item">
<a href="https://www.drautomation.co.uk/" target="_blank">www.drautomation.co.uk</a>
</div>
<div class="contact-item">
<img height="10px" alt="Phone" src="http://i.imgur.com/jGuitJh.png">
01224 968070
</div>
<div class="contact-item">
<img height="10px" alt="Email" src="http://i.imgur.com/7rvGp17.png">
<a href="mailto: [e-mail]">[e-mail]</a>
</div>
</div>
</div>
</div>

Answer 1

When you specify css for the link, it will be useful if you add this css for all pseudo-classes.

In your case:

contact-item a,
contact-item a:visited,
contact-item a:hover,
contact-item a:active {
    color:black;
}

More about Pseudo-classes here: http://www.w3schools.com/Css/css_pseudo_classes.asp

Answer 2

a:visited.

, , .

Answer 3

a, a:visited, a:active, a:hover{
color:#000000;
}

, , URL

http://www.w3schools.com/css/css_link.asp