CODEWITHSUNDEEP
css
NullVoxPopuli
NullVoxPopuli

Reputation: 65083

CSS: how do I remove the underline from a link that isn't directly in the anchor tag?

<a href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a .action_box {
text-decoration: none;
}

doesn't work =\

Upvotes: 10

Views: 64247

Answers (6)

Smita Kagwade
Smita Kagwade

Reputation: 293

You are trying to remove underline from div which is inside the anchor tag

Simply use 

a{
text-decoration: none;
}

You can give id to anchor tag for better use,

<a id="linkid" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>

and use css 

a#linkid{

     text-decoration: none;
}

Upvotes: 0

Houston
Houston

Reputation: 1

Can you not just use this.

#content > ul {
             text-decoration: none;
           }

The above obviously is my own.

Upvotes: 0

chris lewis
chris lewis

Reputation: 11

Problem is, it's not putting the underline under the text, it's underlining the div. Basically you'd need to define the rule at the anchor still, not for the content inside the anchor:

a, a .action_box { text-decoration: none; }

Upvotes: 1

iwalkbarefoot
iwalkbarefoot

Reputation: 955

You still need to apply the text-decoration style to the outer href tag.

Example follows:

<html>
    <head>
        <style>
        .noUnderline {
        text-decoration: none;
        }
        </style>
    </head>
  <body>
    <a class="noUnderline" href="/admin/menu_bars/select">
        <div class="action_box">
            Manage Menu Bars
        </div>
    </a>
</body>
</html>

Upvotes: 1

Nico Burns
Nico Burns

Reputation: 17099

Your code is trying to remove the underline from the div (which probably doesn't have one) rather than the link (which probably does). Simply

a {
text-decoration: none;
}

will work, although that will remove the underline from all links.

If you need to be more specific to that link then use

<a class="action_link" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a.action_link {
text-decoration: none;
}

This assumes that the underline is in fact a text-decoration on the link element and not a border-bottom on the div.

Upvotes: 16

Jeff Andersen
Jeff Andersen

Reputation: 342

It quite possibly could be an issue of another class / property is overriding your latest attempt; however, try what Silence Dogood said:

a div .action_box {
   text-decoration: none;
}

If that doesn't work we'll need to see the rest of the CSS.

Upvotes: 0

Related Questions