How to remove href underline inside a div element?

Question

I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.

Can anyone please help me? Below is the code.

 <style>


     a .menu_items {
        text-decoration:none;
        font-size: 34px;
        color:red;

    }

   </style>
    </head>
    <body>

                <a href="#"><div class="menu_items"> Pizza  </div></a>

Exact duplicate of http://stackoverflow.com/questions/5207345/css-how-do-i-remove-the-underline-from-a-link-that-isnt-directly-in-the-anchor — Fabrizio Calderan, Jun 11 '14 at 16:03

score 3 · Answer 1 · answered Jun 11 '14 at 15:47

3

Try this:

a {
text-decoration:none;
}

Cause you are trying add text-decoration to the div with class .menu_items but not for tag a

answered Jun 11 '14 at 15:47

user3127896

6,323
15
39
65

score 2 · Accepted Answer · answered Jun 11 '14 at 15:58

you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css

i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css

 a {
    text-decoration:none;
    font-size: 34px;
    color:red;

}

and in your page after loading your css file you only have to copy this as you were codding

    <body>    
                <a href="#"><div class="menu_items"> Pizza  </div></a>
</body>

i hope i helped you

score 0 · Answer 3 · answered Jun 11 '14 at 15:48

0

Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.

answered Jun 11 '14 at 15:48

user3018313

1

score 0 · Answer 4 · answered Jun 11 '14 at 15:56

0

just delete the selector '.menu_items' like this

<style>
    a {
        text-decoration:none;
        font-size: 34px;
        color:red;
    }

</style>
<a href="#">
    <div class="menu_items"> 
        Pizza  
    </div>
</a>

here's the jsfiddle

answered Jun 11 '14 at 15:56

Felipe Barnett

407
4
10

score 0 · Answer 5 · answered Jun 11 '14 at 15:57

0

The CSS property for removing the underline is

text-decoration:underline;

You will need to apply this to your anchor element.

See this here-> http://jsfiddle.net/CzDkH/

Hope this helps!!!

answered Jun 11 '14 at 15:57

Satwik Nadkarny

5,086
2
23
41

score 0 · Answer 6 · answered Jun 11 '14 at 16:01

0

Place this above all your styles:

a {
    text-decoration:none;
}

Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.

Happy styling :)

answered Jun 11 '14 at 16:01

Michael

9,639
3
64
69

score 0 · Answer 7 · answered Apr 28 '19 at 14:38

If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:

   .menu_items a {
        text-decoration:none;
        font-size: 34px;
        color:red;

    }

Similarly you've got the div inside the a tag, and should have the a tag inside the div

<div class="menu_items"><a href="#">Pizza</a></div>

How to remove href underline inside a div element?

7 Answers7