CODEWITHSUNDEEP
htmlcss
mcan
mcan

Reputation: 2082

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

Upvotes: 3

Views: 6035

Answers (4)

mplungjan
mplungjan

Reputation: 178116

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>

Upvotes: 3

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

Set

a {
    text-decoration:none;
}

before your style. The underline is coming from there.

Upvotes: 7

dobrinov
dobrinov

Reputation: 614

You should not place a DIV inside of an A tag. I did some changes which will make it work.

HTML

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

CSS

#signup_button_container {
  text-align: center;
}

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

http://jsfiddle.net/96sf8/4/

Upvotes: 2

Ennui
Ennui

Reputation: 10190

You need to set text-decoration: none on the a element not the div inside it.

Also, it's not good practice to put block level elements like divs inside of inline elements like anchors. You should just apply all the #signup_button styles directly to the a and get rid of the div.

Upvotes: 3

Related Questions