CODEWITHSUNDEEP
htmlcsstext-decorations
dmca
dmca

Reputation: 65

text-decoration: none not working at all

I am trying to remove the underline on the text within my button div but cannot get anything to work, please advise how I can get rid of it.

Any help much appreciated.

Code:

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
  text-decoration: none;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
}
.btn p {
  text-decoration: none;
}
<div id="leftpane">


  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>



</div>

I have tried various ways of implementing text-decoration: none but none have worked, that is why it is now in several places.

Upvotes: 1

Views: 754

Answers (5)

planetsarecool
planetsarecool

Reputation: 27

EDIT

as pointed out, "!important" should be used to override inaccessible css rules, otherwise specificity is the way to go

-----

try

.btn:first-child {
      text-decoration: none !important;
 }

or

 #leftpane a {
     text-decoration: none !important;
 }

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 31

Try this instead

#leftpane > a {
text-decoration:none
}

The text-decoration property is not inherited so you need to specify it on the actual anchor element, not its parent.

Upvotes: 0

Jeff Watkins
Jeff Watkins

Reputation: 6359

You will want to move your text-decoration: none into a separate statement

#leftpane a {
  text-decoration: none;
}

This is because "a" under there will have inherited its default styles, in order to override them, you have to be more specific at the tag level.

See the working fiddle here

Upvotes: 2

isherwood
isherwood

Reputation: 61053

You need a more specific selector:

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane a {
    text-decoration: none;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
}
.btn p {
  text-decoration: none;
}
<div id="leftpane">


  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>



</div>

Upvotes: 1

j08691
j08691

Reputation: 207901

You need to set the text-decoration to none on the anchor (#leftpane a):

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
#topbar {
  display: block;
  width: 100%;
  height: 6%;
  background-color: #cc0000;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: 1px 1px 5px 1px #888888;
}
#leftpane {
  float: left;
  width: 10%;
  height: 94%;
  background-color: #8b9dc3;
  margin: 0;
  padding: 0px;
  box-shadow: 1px 1px 5px 1px #888888;
}
.btn {
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 13px;
  padding: 2px 0px 2px 5px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
}
#leftpane a {
  text-decoration: none;
}
<div id="leftpane">
  <a href="url/post.php">
    <div class="btn">
      <p>Post a Bulletin</p>
    </div>
  </a>
</div>

Upvotes: 2

Related Questions