CODEWITHSUNDEEP
htmlcss
Shedlor
Shedlor

Reputation: 85

Unwanted line underneath div text in Browser

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.

I have text-decoration: none; in the code. Any help would be appreciated!

Website in Browser: http://test.crows-perch.com/

HTML of Text in question:

<a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

CSS of all related elements: 

     #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;
 }

Upvotes: 0

Views: 33

Answers (1)

CaribouCode
CaribouCode

Reputation: 14398

The text-decoration is typically applied to the link, not elements inside it. Try this instead:

a.Guides { text-decoration: none; }

Upvotes: 1

Related Questions