How remove underline from img a link dropdown in table?

Question

I have tried removing the underline using text-decoration:none all over the place but I cannot get it to remove itself.

This is my HTML...

.dropdown {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  text-decoration: none;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-decoration: none;
}

.dropdown:hover .dropimg {
  background-color: #3e8e41;
  text-decoration: none;
}

img.dropimg {
  text-decoration: none;
}

td.table_data.dropdown .image-link {
  text-decoration: none;
}

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

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

td.table_data.dropdown a.image-link {
  text-decoration: none!important;
}

<td class="table_data dropdown">
  <a class="image-link" href="/somelink"><img class="dropimg" src="img/address_book.png" alt="contact" height="25px" width="25px">
    <div class="dropdown-content">
      <a href="#">Name: Blah</a>
      <a href="#">DoB: Blah2</a>
    </div>
  </a>
</td>

Perhaps I'm not being specific enough with my CSS but I don't know where to go from here. Naturally, I'd like it to work on most modern browsers. We typically use IE, Edge, Firefox and Chrome in house where this site is deployed.

Any advice would be most appreciated; thanks.

Your HTML is invalid...links cannot have other links as descendants. — Paulie_D, Jan 26 '18 at 17:13
The sub '' links are not really relevant as I'm not using them but I take your point. The question is separate from that issue. — Rodent, Jan 26 '18 at 17:16
If you aren't using them then your demo is **useless**. You need to demo the **actual** problem with **actual** code. — Paulie_D, Jan 26 '18 at 17:21

score 0 · Answer 1 · answered Jan 26 '18 at 17:17

0

Set the text decoration to the a tag itself.

 a{text-decoration: none;}

You dont want to nest a tags use a li or a button for your dropdown.

answered Jan 26 '18 at 17:17

Jonny

1,319
1
14
26

That didn't work but thanks. I've found a different solution; see above. – Rodent Jan 26 '18 at 17:24

score -2 · Answer 2 · answered Jan 26 '18 at 17:27

-2

This solution works for me:

<td class="table_data">
    <a style="text-decoration:none;"
       title="Name: blah1&#10DoB: Blah2&#10"
       href="/some-link/">
        <img class="dropimg" src="{% static "img/address_book.png" %}" alt="contact" height="20px" width="20px">
    </a>
</td>

answered Jan 26 '18 at 17:27

Rodent

1,698
1
12
13

This is the same answer i gave lol dont nest the a tags, and apply text-decoration:none to a tag. – Jonny Jan 26 '18 at 17:29
I don't understand your comment @Paulie_D because the anchor DOES have an href and there is only one anchor (I presume by anchor you mean the a element) in the answer. – Rodent Jan 26 '18 at 17:33
You changed your edit you had 2 nested a tags within an a tag. @Paulie_D is right. The structure you had was incorrect HTML. Hard to solve a problem if you dont listen – Jonny Jan 26 '18 at 17:36

How remove underline from img a link dropdown in table?

2 Answers2