Tahtakafa Tahtakafa - 6 months ago 13
HTML Question

Deleting underline in URL's [text-decoration: none; doesn't work]

I want to delete underline. I have already put

text-decoration: none;
. However it doesn't work. Here is a DEMO.

HTML

<a href="./index.php?sign_in=1">
<div id="signup_button">
Sign up
</div>
</a>


CSS

#signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color:#fff;
font: 35px/1 "Impact";
text-decoration: none;
}

Answer

text-decoration belongs to the "a" tag, but you can also get rid of the div.

If you set the display:block on the a, you have the same effect

<a href="./index.php?sign_in=1" class="signup_button">Sign up</a>

now looks exactly the same as

<a href="./index.php?sign_in=1">
  <div class="signup_button">
    Sign up
  </div>
</a>

using

.signup_button {
  position: relative;
  max-width: 206px;
  min-height: 20px;
  max-height: 40px;
  margin: auto;
  margin-top: 10px;
  padding: 10px 10px 10px 10px;
  background-color: #0096cc;
  text-align: center;
  color:#fff;
  font: 35px/1 "Impact";
  display:block;
}
a {
  text-decoration: none;
}

.signup_button {
  position: relative;
  max-width: 206px;
  min-height: 20px;
  max-height: 40px;
  margin: auto;
  margin-top: 10px;
  padding: 10px 10px 10px 10px;
  background-color: #0096cc;
  text-align: center;
  color: #fff;
  font: 35px/1"Impact";
  display: block;
}
a {
  text-decoration: none;
}
<a href="./index.php?sign_in=1" class="signup_button">Sign up</a>
<p><hr /></p>
<a href="./index.php?sign_in=1">
  <div class="signup_button">
    Sign up
  </div>
</a>