Question

I have a <div> inside a <a>, that I don’t want to be underlined.

HTML :

<a href="/joomla17/contact">
  <div class="button">nous contacter</div>
</a>

A generic a rule is defined elsewhere.

I tried this with css :

.button {
    text-decoration: none;
}

but it is still underlined. Checked with Firebug that the text-decoration: none isn’t overridden.

I feel that I have to specify a:link, but I don’t know how to make it match my class

Answer 1

Since you are using the div with display: inline;, its not necessary because a is an inline element by default. So why put an inline container inside an inline element?

<a class="button" href="/joomla17/contact">nous contacter</a>

But maybe you have some special reasons for that build, so this could be an solution with the div. Since the div is inside the a, it inherits the properties of a, so normally it should inherit the underline thing too. But maybe you need to set that on the div explicitly.

.button, .button div { text-decoration:none; }

Maybe you need to add !important in front of the ;, depends on the complexity of your layout.