CODEWITHSUNDEEP
htmlcssunderline
Frank G.
Frank G.

Reputation: 1579

Text Underline Showing Underline

I seem to be having a problem with Underline. I have a box that is linkable:

<div class="single_box">
   <a href="servicesweprovide.asp"><img src="images/law_enforcement_accreditation.jpg" alt="" />
   <p>Law Enforcement<br />Accreditation</p></a>
</div>

Here is the CSS:

.single_box {
    width:253px;
    min-height:170px;
    float:left;
    margin:0px 15px 0 0;
    padding:0px;
    text-decoration:none;
}
.single_box p{
    background:url(../images/arrow.png) 92% 50% #0b2e84 no-repeat;
    font:bold 16px/18px  Arial, Helvetica, sans-serif; color:#fff;
    padding:6px 14px;
    word-spacing:normal;
    letter-spacing:normal;
    font-stretch:normal;
    cursor:pointer;
    text-decoration:none;
}
.single_box p:hover {
    background-color:#ffc210;
    text-decoration:none;
}

I set it up on JFiddle here: http://jsfiddle.net/2EHkp/

I have a feeling it has to do with me targeting the <p> Paragraph and not the href. But I can't figure out how to target the href instead of the <p>. Can someone please tell me what I am doing wrong?

Upvotes: 1

Views: 247

Answers (5)

Chinmay235
Chinmay235

Reputation: 3414

Anchor link ... by default takes underline if you have not using any css like text-decoration:none;

Please add one extra class under your .single_box class

Here is my code :

.single_box a{text-decoration:none;}

Upvotes: 0

blurfus
blurfus

Reputation: 14041

to target the href, you may need:

.single_box a{text-decoration:none;}

Upvotes: 0

Barbara Laird
Barbara Laird

Reputation: 12717

text-decoration is underline by default for links. So, you need to turn that off:

.single_box a {
    text-decoration: none;
}

Upvotes: 1

khollenbeck
khollenbeck

Reputation: 16157

You need to select the anchor. Instead of the container. http://jsfiddle.net/2EHkp/1/ 

.single_box a {text-decoration:none;}

This is what you had:

.single_box  {text-decoration:none;}

Upvotes: 1

Roland Jansen
Roland Jansen

Reputation: 2783

.single_box a {text-decoration:none;}

Upvotes: 3

Related Questions