Text-decoration: none not working

G

12

54

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>

Green answered 10/7, 2012 at 18:55 Comment(8)

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. – Barracuda 10/7, 2012 at 18:58

I'm not seeing any underline. – Spicy 10/7, 2012 at 18:59

I'm using Safari 5.1.7. That's really odd. – Green 10/7, 2012 at 18:59

It isn't underlined for me, but your HTML has some semantic issues. – Morion 10/7, 2012 at 19:0

It's underlined in IE7 and IE6, per my tests. – Peekaboo 10/7, 2012 at 19:0

@OllyF I am using the same browser. Let me know if my answer works for you. – Ulla 10/7, 2012 at 19:0

In which browser??, in my FF see the text whitout decorations – Stately 10/7, 2012 at 19:1

See my (and Woz)'s answers below. Alternatively you can move the <a> tag INSIDE the div tags with the id "widget" and it should work. – Micropathology 10/7, 2012 at 19:1

K

52

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.

Kaufmann answered 10/7, 2012 at 19:0 Comment(0)

O

58

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

=> Working with me :) , good luck

Orpington answered 26/5, 2015 at 2:20 Comment(2)

very cool, thanks! And btw, when I need to underline for hover, the same solution worked - .some_title:hover { text-decoration: underline!important; } – Insignificancy 18/6, 2015 at 3:50

That simply works! – Pedigree 8/4, 2023 at 7:39

K

52

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.

Kaufmann answered 10/7, 2012 at 19:0 Comment(0)

T

14

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

Treviso answered 20/12, 2013 at 11:24 Comment(0)

E

9

Add this statement on your header tag:

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

Ebbarta answered 13/5, 2016 at 8:44 Comment(0)

I

3

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

Ilmenite answered 26/1, 2014 at 14:47 Comment(0)

B

3

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}

Bedfast answered 30/10, 2018 at 19:45 Comment(0)

W

2

I have an answer:

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

It works.

Wille answered 22/12, 2014 at 6:53 Comment(0)

V

2

Add a specific class for all the links :

html :

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

in css :

.noDecoration {
  text-decoration: none;
}

Verbiage answered 7/4, 2018 at 20:41 Comment(0)

S

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.

Sigrid answered 13/10, 2016 at 5:43 Comment(0)

F

1

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;

Forseti answered 14/5, 2020 at 12:58 Comment(0)

C

0

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

Conceivable answered 14/11, 2017 at 15:40 Comment(0)

F

0

An old question and still no explanation. The underline is drawn not on your <div class="title"> element but on its parent a, since all browsers set this style for links by default.

If you provide custom decoration style for the inner div - it will be visible instead of the parent style. But if you set none (and it is already set on divs by default), your div will not be decorated, but its parent decoration will become visible instead.

So, as people suggested, in this case to remove all the decoration text-decoration: none; should be set on the parent a element.

Fascinator answered 19/9, 2022 at 19:12 Comment(0)

Recommended topics

Hot tags