Unvisited links looking wrong

Question

First post here, don't judge me if I ask something incredibly stupid, but I started working with CSS just a couple of days ago.

My problem is (as you can see here: www.silente.info ), that when you already visited a link it looks different. And it looks how I want it to look, but I want the unvisited link to look the same way. So basically I'm trying to make the unvisited link look like the visited.

I just can't find what can possibly screw it up. So I registered and I'm calling for help. :)

EDIT: I know what the tags do, but basically my 0.5 opacity for the whole block (when not being hovered) applies only to the visited links. I hope that avoids answers telling me to use stuff I already used in the css I already provided. :)

This is my css (yeah, it's a mess). After it you can find my HTML.

/* FROM TEST.CSS */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{margin:0}
table{border-collapse:collapse;border-spacing:0;width:100%;display:table}
/* END OF TEST.CSS ??*/

table,th,td,.playertable,.playerth,.playertd,.headertable,.headerth,.headertd
{
  text-align: center;
  vertical-align: middle;
  table-layout: fixed;
  color: #603D9A;
  font: 16px/26.4px Helvetica,sans-serif!important
}

tr
{
  display: table;
  width: 100%
}

td
{
  display: inline-table;
  width: 25%
}

.bgcolor1
{
  background-color: #603D9A;
  background: #603D9A
}

.color1
{
  color: #603D9A;
}

:link,:visited
{
  text-decoration: none;
}

:hover,:active,
{
  color: #000;
}

.navbartable
{
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-family: Helvetica,sans-serif!important;
  font-size: 16px;
  line-height: 26.4px;
  font: 700 16px/26.4px Helvetica,sans-serif!important
}

.navbar
{
  margin: 0 auto;
  width: 600px;
  height: 28px;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row;
  border-radius: 0 0 30px 30px;
  border-bottom: 1px solid rgba(96,61,154,0.2);
}

.navbar div
{
  margin: 0 auto;
  font-weight: bold;
}

.website
{
  top: 100px;
  width: 100%;
  min-height: 100%;
  background: -webkit-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: -o-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: -moz-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: linear-gradient(rgba(100,0,255,0.03),rgba(0,0,255,0.2));
  margin: 0 auto;
}

.hovertitle
{
  opacity: .7;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

.hovertitle:hover
{
  opacity: 1;
  color: #603D9A;
}

.hoverbar
{
  opacity: .5;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  opacity: .5;
}

.hoverbar:hover
{
  opacity: 1;
  color: #603D9A;
  font-size: 23px!important;
}

.title
{
  width: 100%;
  height: 200px;
  margin: 0 auto;
  /* START COMMENT HERE TO REMOVE TEXT */
  padding-top: 100px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline!important;
  letter-spacing: -3px;
  text-decoration: none;
  font-size: 32px!important;
  font-style: normal!important;
  font-variant: normal!important;
  font: 700 32px Helvetica,sans-serif!important;
  /* END COMMENT HERE TO REMOVE TEXT */

  /* GRADIENT
    background-image: url("http://i.imgur.com/tIYpwnu.png");
    background: -webkit-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: -o-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: -moz-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: linear-gradient(rgba(0, 0, 255, 0.1), rgba(255, 255, 255, 0.7));
*/
/* IMAGE
  background-image: url("http://i.imgur.com/tIYpwnu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
*/
}

.body
{
  width: 95%;
  padding-top: 50px;
  margin: 0 auto;
}

.footerpadding
{
  height: 50px;
}

.footer
{
  text-align: center;
  width: 100%;
  height: 110px;
  color: #FFFFFF;
  margin: 0 auto;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-family: Helvetica,sans-serif!important;
}

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

li
{
  float: left;
}

a:hover,a:active
{
  color: #000;
}

.playertr
{
  display: table;
  width: 100%
}

.playertd
{
  display: inline-table
}

.headertr
{
  display: table;
  width: 100%
}

.headertd
{
  display: inline-table;
  width: 25%;
}

.chatdiv
{
  position: relative;
  padding-bottom: 132%;
  height: 0
}

.chatdiv iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.playerdiv
{
  position: relative;
  padding-bottom: 56.25%;
  height: 0
}

.playerdiv iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.player
{
  width: 70%
}

.chat
{
  width: 30%
}

HTML:

<html>
<title>Silente Portfolio</title>
<head>
<link rel="stylesheet" type="text/css" href="http://nedsteel.bg/!SILENTE/main.css">
<link rel="icon" href="http://nedsteel.bg/!SILENTE/favicon.png" type="image/gif" sizes="16x16">
<style></style>
</head>
<body>
<div class="website">

  <div class="title color1 hovertitle">
  <a href="http://silente.formyjob.net/">Silent_Entertainment</a>
  </div>

<div class="navbar color1">
  <table class="navbartable color1 headertable">
    <tr class="headertr">
     <td class="headertd"><div class=hoverbar><a href="http://who.silente.info">Who am I</a></div></td>
     <td class="headertd"><div class=hoverbar><a href="#works">My Works</a></div></td>
     <td class="headertd"><div class=hoverbar><a href="#clients">Clients</a></div></td>
    <td class="headertd"><div class=hoverbar><a href="#Contact">Contact</a></div></td>
   </tr>
  </table>
</div>

<div class="body color1">
<table cellpadding="20">
  <tr>
    <td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis aliquip sadipscing, duo ei velit molestie. Ne vix blandit evertitur maiestatis. Et omnium philosophia sit, ius etiam integre corrumpit ea. Nec oratio menandri 

   </td><td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis 

   </td><td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis aliquip sadipscing, duo ei vel

   </td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>






    </div>
  <div class="footerpadding"></div>
</div>
    <div class="footer bgcolor1">
      <a href="http://facebook.com/silentepage"><img src="http://nedsteel.bg/!SILENTE/footer1.png"></a>
      <a href="http://youtube.com/iesdi"><img src="http://nedsteel.bg/!SILENTE/footer4.png"></a>
      <a href="http://twitch.tv/iesdise"><img src="http://nedsteel.bg/!SILENTE/footer3.png"></a>
      <a href="http://twitter.com/Iesdi_SE"><img src="http://nedsteel.bg/!SILENTE/footer2.png"></a>
        <font size="1"></br></br><a href="http://nedart.bg">&#169;2015 NedArt</a> for &#169;Silent Entertainment.</br>
        <a href="http://silente.formyjob.net/">www.SILENTE.info</a> All rights reserved.</font>
    </div>
<p hidden><span style="font-size: 0px;"><a href="http://www.forumotion.com">forumotion.com</a></span></p>
</body>
</html>

Answer 1

When you press F12 and inspect the elements affected, you should notice this:

a:-webkit-any-link{
text-decoration: underline;
}

So maybe adding below lines may help you:

a, a:-webkit-any-link{
text-decoration:none;
}

Answer 2

OK, I got it. Instead of doing this:

.color1
{
  color: #603D9A;
}

<div class="navbar color1">

I should have done that:

a,
a:visited
{
  color: #603D9A;
  text-decoration: none;
}

For some reason the color1 applies only to visited links, when nothing is telling the unvisited one not to take it's effect aswell, but it's fixed.

Answer 3

There is a CSS selector for that. Add:

a,
a:visited {
}

to your CSS to set the same styles for visited and "unvisited" Links. Here is some more information about this.

Answer 4

This would be done with styling the anchor tag in your CSS

a {
 // Your unvisited link
}

a:hover {
  // When hovering the link
}

a:visited {
  // When hovering the link
}