Text-decoration: none not working

Question

Totally baffled! I've tried rewriting the text-decoration: none line several different ways. I also managed to re-size the text by targeting it but the text-decoration: none code will not take.

Help much appreciated.

Code

.widget    
{
     height: 320px;
     width: 220px;
     background-color: #e6e6e6;
     position: relative;                              
     overflow: hidden;                          
}


.title    
{
     font-family: Georgia, Times New Roman, serif;
     font-size: 12px;
     color: #E6E6E6;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: #4D4D4D;    
     position: absolute;
     top: 0;
     padding: 5px;
     width: 100%;
     margin-bottom: 1px;
     height: 28px;
     text-decoration: none;
}

a .title    
{
     text-decoration: none;
}

<a href="#">
    <div class="widget">  
        <div class="title">Underlined. Why?</div>  
    </div>
</a>

I'm with Nikola, no underlines. Also, when posting a demo please consider tidying your white-space; the goal is to have a demo we can work with, see and read, easily. Further, a `div` nested within an `a` element is invalid outside of HTML5, so be sure of your doctypes when using that construction. — David says reinstate Monica, Jul 10 '12 at 18:58
It isn't underlined for me, but your HTML has some semantic issues. — Ryan B, Jul 10 '12 at 19:00
@OllyF I am using the same browser. Let me know if my answer works for you. — woz, Jul 10 '12 at 19:00
In which browser??, in my FF see the text whitout decorations — Rolando Corratge Nieves, Jul 10 '12 at 19:01
See my (and Woz)'s answers below. Alternatively you can move the tag INSIDE the div tags with the id "widget" and it should work. — Losbear, Jul 10 '12 at 19:01

score 44 · Answer 1 · answered May 26 '15 at 02:20

44

a:link{
  text-decoration: none!important;
}

=> Working with me :) , good luck

answered May 26 '15 at 02:20

DongNguyen

568
4
6

2

very cool, thanks! And btw, when I need to underline for hover, the same solution worked - **.some_title:hover { text-decoration: underline!important; }** – Gene Bo Jun 18 '15 at 03:50

score 43 · Accepted Answer · answered Jul 10 '12 at 19:00

You have a block element (div) inside an inline element (a). This works in HTML 5, but not HTML 4. Thus also only browsers that actually support HTML 5.

When browsers encounter invalid markup, they will try to fix it, but different browsers will do that in different ways, so the result varies. Some browsers will move the block element outside the inline element, some will ignore it.

score 9 · Answer 3 · answered Dec 20 '13 at 11:24

9

Use CSS Pseudo-classes and give your tag a class, for example:

<a class="noDecoration" href="#">

and add this to your stylesheet:

.noDecoration, a:link, a:visited {
    text-decoration: none;
}

answered Dec 20 '13 at 11:24

Mimeshead

169
1
8

score 6 · Answer 4 · answered May 13 '16 at 08:44

6

Add this statement on your header tag:

<style>
a:link{
  text-decoration: none!important;
  cursor: pointer;
}
</style>

answered May 13 '16 at 08:44

Ram Madhavan

2,166
1
15
20

score 3 · Answer 5 · answered Jan 26 '14 at 14:47

3

Try placing your text-decoration: none; on your a:hover css.

answered Jan 26 '14 at 14:47

Esci Villagonzalo Morales

99
1
1
7

score 2 · Answer 6 · edited Dec 22 '14 at 09:05

2

I have an answer:

<a href="#">
    <div class="widget">  
        <div class="title" style="text-decoration: none;">Underlined. Why?</div>  
    </div>
</a>

It works.

edited Dec 22 '14 at 09:05

RichardBernards

3,140
1
20
30

answered Dec 22 '14 at 06:53

jnhy

21
1

score 2 · Answer 7 · answered Apr 07 '18 at 20:41

2

Add a specific class for all the links :

html :

<a class="class1 class2 noDecoration"> text </a>

in css :

.noDecoration {
  text-decoration: none;
}

answered Apr 07 '18 at 20:41

Alouani Younes

668
8
14

score 2 · Answer 8 · answered Oct 30 '18 at 19:45

2

if you want a nav bar do

ul{ list-style-type: none; } li{text-decoration: none;

This will make it want to make the style of the list type to None or nothing

with the < a > tag:

a:link {text-decoration: none}

answered Oct 30 '18 at 19:45

PIZZZZZZZZZZZA is here

117
8

score 1 · Answer 9 · answered Oct 13 '16 at 05:43

1

There are no underline even I deleted 'text-decoration: none;' from your code. But I had a similar experience.

Then I added a Code

a{
 text-decoration: none;
}

and

a:hover{
 text-decoration: none;
}

So, try your code with :hover.

answered Oct 13 '16 at 05:43

SungWoo_Park

29
7

score 1 · Answer 10 · answered Nov 14 '17 at 15:40

1

I had lots of headache when I tried to customize a WordPress theme and the text-decoration didn't help me. In my case I had to remove the box-shadow as well.

a:hover {
    text-decoration: none;
    box-shadow: none;
}

answered Nov 14 '17 at 15:40

Zoltan Febert

181
2
6

score 0 · Answer 11 · answered Jul 10 '12 at 18:59

0

try adding this to your stylesheet:

a {text-decoration:none;}

answered Jul 10 '12 at 18:59

Losbear

2,939
29
28

That works but I don't want to globally declare `text-decoration: none`. – Olly F Jul 10 '12 at 19:03
2

Then give give your tag an id (or a class), for example: `` and add a simple CSS rule: `.noUnderline { text-decoration: none }` – Shahar Jul 10 '12 at 20:11

score 0 · Answer 12 · edited Apr 18 '16 at 05:55

0

I used the code below to get mine to work in Chrome. You can adjust the nesting:

a:-webkit-any-link { color: black; }

edited Apr 18 '16 at 05:55

MikeT

32,107
13
38
54

answered Apr 18 '16 at 05:13

Eben Hafkamp

109
1
1
10

score 0 · Answer 13 · answered May 14 '20 at 12:58

As a sidenote, have in mind that in other cases a codebase might use a border-bottom css attribute, for example border-bottom: 1px;, that creates an effect very similar to the text-decoration: underline. In that case make sure that you set it to none, border-bottom: none;

score -7 · Answer 14 · answered Dec 06 '13 at 16:38

-7

I just did it the old way i know that its not right but its a quick fix.

<h1><a href="#"><font color="#FFF">LINK</font></a></h1>

answered Dec 06 '13 at 16:38

alecgrogan23

21
5

Text-decoration: none not working

14 Answers14

Linked