CODEWITHSUNDEEP
htmlimagecss
Andor Nagy
Andor Nagy

Reputation: 174

Remove border from an image inside an anchor tag

So.. I'v added a bottom border to my anchor tags, to make them stand out. But I have some images that are also warped around with anchor tags. The thing is, I don't know how to remove the border from the image.

Please note that I'm using WordPress and I can't edit how links and images are displayed

This is my CSS Code:

.entry-content a {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}

And my question is, that is there any way to make something like this?

.entry-content a img {
border:none;
}

So it only removes the border from the images with links?

http://codepen.io/andornagy/pen/sdzBq

Upvotes: 2

Views: 4969

Answers (3)

user3301364
user3301364

Reputation:

There you go... :)

the HTML :

<div class="entry-content">
<a href="#">test</a>
<a href="#">
    <img src="https://www.google.co.il/images/srpr/logo11w.png" />
</a>
</div>

the CSS:

.entry-content a:not(a img) {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}

the jsFiddle :

http://jsfiddle.net/3RJ3Q/2/

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

The problem you are having is that you're styling the anchor tag and then trying to overwrite that style on an <img> tag, which doesn't actually have the style being applied to it, but rather it's parent.

If you don't want to use Javascript, you can wrap your text in the links in a <span> tag and style that span instead of the anchor itself.

HTML

<a href='#'><span>This is a blank Link</span></a>
<a href='#'><img src="..."></a>

CSS

a {
    padding:0 3px;
    color: #104273;
    text-decoration:none;
}
a span {
    border-bottom:2px solid #104273;
}

Here is a fiddle of it in action: http://jsfiddle.net/xVSA9/

UPDATE

Ok, here is a solution using jQuery's parent() selector.

$('img').parent('.entry-content a').css("border-bottom", "none");

Leaving your CSS/HTML the same, this should work just fine.

Here is a fiddle: http://jsfiddle.net/GeR85/

Upvotes: 2

bashleigh
bashleigh

Reputation: 9314

presuming you're HTML looks as follows:

<div class="entry-content">
    <a href=""><img src=""/></a>
</div>

the image is a direct child of the anchor so you can use the 'direct child' selector in CSS which is a more than symbol. 

.entry-content>a>img{}

I like to use organised lists when making menus because it's in the name. They're organised lol. 

<ol id="menu">
    <li>
        <a href=""><img src=""/></a>
    </li>
    <li>
        <a href="">This is a blank link</a>
    </li>
    <li>
        <a href="">Another link</a>
    </li>
</ol>

CSS

img{
    border:1px solid #000000
}
ol#menu{
    list-style-type:none;
    margin:0px;
    padsding:0px;
}
ol#menu>li{
}
ol#menu>li>a{
    display:block;
    padding:10px 5px;
    font-size:20px;
    text-decoration:none;
    border-bottom:1px solid #000000;
}
ol#menu>li>a>img{
    border-bottom:none;
}

Avoid using !important.

Upvotes: 0

Related Questions