a img and Hierarchy’s

[zackattack]

Hi - I have been looking at this too long and desperately need another brain

Hierarchy’s in CSS regarding links.

I have the following near the top of the stylesheet:

a:link {
color: #339900;
text-decoration: none;
border-bottom: 1px dotted #bbb;
}
a:visited {
color: #339900;
text-decoration: none;
border-bottom: 1px dotted #06c;
}
a:hover {
color: #333333;
border-bottom: 1px solid #fff;
}

and at the bottom of the stylesheet I have the following:

a img {
border: none;
}

However images with links are still coming out with borders - this is driving me nuts! any help would go along way to preventing me from jumping out the window :-(

ZA

[Elliott Hird]

Use

img {
border: 0px;
}

[daosmith]

This is because the selector is specifying that all <img> elements that are descendants of <a> elements should have no borders, not that the parent <a> elements should have no borders (which is the effect I assume you are going for).

You could give a class to the <a> elements which have <img> descendants - AFAIK there is no selector that selects all elements of type x whose children are of type y, which - again, assuming that I've understood you correctly, would be ideal.

[Elliott Hird]

img {
border: 0px;
}

works just fine.

[daosmith]

Er... no, it doesn't. It does remove the border around the <img> element - but so does the original css supplied (i.e. a img { border: none; }) - the dotted border at the bottom remains (because this applies to the <a> element and not to the <img> element) - and it is this, I assume, that zackattack is trying to remove.

[zackattack]

Hi - thanks for your replies

Ok I got it, the way I am writing it is targeting the child and I want to target the parent, so I added this class to the <a> tag around the image and it worked

a.nobdr {
border: none;
}
a:hover.nobdr {
border: none;
}

I guess there is no other way to achive this unless using attribute selectors and these are not supported in IE (yet)

ZA

[Robin_reala]

A slight correction: you've got your classes and pseudoclasses the wrong way round. The 2nd selector in your example should be:

a.nobdr:hover

[zackattack]

Hi Robin_reala

Really appreciate you correcting me, this is someting I have wondered about for a while - Luckily both FF and IE have been quite forgiving about this, but I am very glad to have found out the proper way to do this

thanks again

ZA