remove link underline from image only if the anchor tag contains an img

[rahulpalake]

Hi,

for the above html code I am using the following css

a {

border-bottom-style: dotted;

border-bottom-width: 1px;

}



a img {

border: 0 none;

}

Basically what I am trying to achieve here to underline the text links while keeping img links without any underline. however I guess by styling the text links I am also styling image links, I want any image in a link should not be underlined.

Can any one suggest work around for this?

[jamygolden]

jQuery:

$('img').parent('a').addClass('contains-image');

CSS:

a { border: 1px solid red; }

.contains-image { border: none; }

[Shebo]

There’s a few methods to get this trick done.

1. before printing the html- give any ‘a’ with an ‘img’ tag inside it a unique class, and style only the class.
if you are using any loop to print this data, use an ‘if’ to check if there’s an image to be printed.

2. after the data printing- use JS to find if an ‘a’ tag have an ‘img’ tag, and if so, give him a unique class.
Example:

or

3. The slick_rick way- use CSS3 new selectors to get the job done.

a>img {border-bottom-style: dotted; border-bottom-width: 1px;} 

more info about css3:
http://www.w3schools.com/cssref/sel_element_gt.asp

[jamygolden]

Errr…

@Shebo – A couple of things.

1) First of all, both of your javascript methods could be achieved with CSS. That CSS is your third example.

2) That is not “CSS3”. That selector is defined in the CSS 2.1 spec and works on all modern browsers AND IE7+

3) w3schools isn’t cool. Rather use the Mozilla Developer Network as a resource

This might interest you too: http://w3fools.com/

@rahulpalake the problem with this trick is you need to target an elements parent.
You need to detect for all img elements and find an anchor parent and remove the border. This can’t be done with CSS alone right now ( It may or may not exist in future ).

My example works, here’s a jsfiddle: http://jsfiddle.net/GVVMd/

[Shebo]

hey @jamy_za , thank u for correcting me.
and of course you are right about the css, i confused the element > element with the none existing selector, element < element. And I learned alot from the whole w3school stuff, never knew all of that.

[Author]

Posts