title: Unwanted line underneath div text in Browser
body: <p>I'm using dreamweaver to code my website. I've got a div with text inside an anchor element in order to get the whole div clickable, however when displayed in a browser, there's a weird Purple/Red line underneath the Text. </p>
  
  <p>I have text-decoration: none; in the code. Any help would be appreciated!</p>
  
  <p>Website in Browser: <a href="http://test.crows-perch.com/" rel="nofollow">http://test.crows-perch.com/</a></p>
  
  <p>HTML of Text in question:</p>
  
  <pre><code>&lt;a href="/" class="Guides"&gt;&lt;div id="Guides"&gt;&lt;div id="GuidesT"&gt;GUIDES&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS of all related elements: </p>
  
  <pre><code>     #Guides {
       z-index: 4;
       position: relative;
       margin: 0 auto;
       top: -135px;
       right: 89px;
       width: 133px;
       height: 65px;
       background: url(../images/button%20texture%20b.jpg);
       border-style: solid;
       border-width: 1px;
       border-color: #7F7F7F;
       border-top: none;
       border-bottom: none;
       text-align: center;
    }
  
  #Guides:hover {
       width: 133px;
       background:url(../images/button%20overlay%20b.png) no-repeat center,        url(../images/button%20texture%20b.jpg) no-repeat top left;
       background-size: cover;
  }
  
   #GuidesT {
       text-decoration: none;
       font-family: "Cinzel Regular";
       font-size: 18px;
       letter-spacing: 1px;
       color: #D2C300;
       line-height: 65px;
       vertical-align: middle;
   } 
  </code></pre>