CODEWITHSUNDEEP
htmlcss
Ryflex
Ryflex

Reputation: 5779

Removing an underline from a link in css

I've been trying to remove an ugly underline from a webpage but for some reason it just won't go away.

I've tried using text-decoration:none; and color: #FFFFFF; to no avail.

Original css:

#noday {
    color: #ECECEC;
    font-family: "Times New Roman",Times,serif;
    font-size: 1em;
}

The snippet of code:

<a href="http://www.example.com/content/" target"_blank"><div id="noday"><br><br>Random text here</div></a>

Real example: http://jsfiddle.net/c0c6g4rd/

I've looked at: Remove stubborn underline from link but it hasn't helped :/

Upvotes: 2

Views: 22800

Answers (5)

Matt
Matt

Reputation: 26

Just to make sure, try adding a !important after your text-decoration: none:

a{text-decoration: none !important}

If that does work, then there is a hierarchy problem and something else is overriding your declaration. Also try putting your declaration at the END of your CSS to override any other declarations.

Upvotes: 0

eritbh
eritbh

Reputation: 806

The root of this problem is that you can't put a div (a block-level element) inside an a (an inline element. However, there are better ways of doing what you're trying to do.

As the others said, this will apply to all links:

a { text-decoration: none; }

However, if you only want to apply it to that one link, add the id to the a like this rather than using another element:

<a ... id="noday">...</a>

Then style the same way.

Fiddles of examples:

http://jsfiddle.net/9gsu9ok3/ (Style all links)

http://jsfiddle.net/9gsu9ok3/3/ (Style only certain links)

Hope this helps.

Upvotes: 0

H&#233;ctor
H&#233;ctor

Reputation: 509

Add at the beginning of your css file:

a{
 text-decoration:none;
}

With these lines you will remove this underline from all links in your html.

Upvotes: 2

CJR
CJR

Reputation: 3592

Try this, add a id(or class) to your a href

<a href="http://www.example.com/content/" id="thisLink" target"_blank">Random text here</a>

and add this to your css file:

#thisLink{
    text-decoration: none;
}

This should remove the underline!

Here a Jsfiddle of that:

http://jsfiddle.net/c0c6g4rd/4/

Upvotes: 2

Henrik Petterson
Henrik Petterson

Reputation: 7104

Just add text-decoration:none; to a tag for #noneall:

#noneall a{
    text-decoration:none;
}

Here is a jsfiddle.

Upvotes: 17

Related Questions