Help with CSS logic

Disable border around an image link

[craig1972]

Hi,

I have a DIV within which I want all text links to have a border-bottom (to give the appearance of underline) but not with images that are linked.

So, if the text is like this:

<div class="MYSTUFF">
This is my killer text, which points to <a href="#textlink">some text link</a> and then also displays this image to go with it: <a href="#imagelink"><img src=""></a>. And then there's text after that. 
</div>

In the above, I want the "some text link" to be underlined, but not the image. I currently have this code:

.MYSTUFF a {border-bottom: 1px #ccc solid }

But this also enables the underline on the image. I want only text underline, no image underline. Would appreciate any thoughts.

[benihana]

.MYSTUFF a img {border:0;}

[craig1972]

Thanks I already tried that, but that disables the border on the image only, not on the A tag. (In any case, I need the borders around the IMG, I just need to get rid of the A border).

[benihana]

sorry, just engaged my brain:(

change:

.MYSTUFF a {border-bottom: 1px #ccc solid }

to

.MYSTUFF a {text-decoration:underline; }

[craig1972]

Thanks, I was wondering if there's a way to make the text-underline a little bit below the link? I like the border-bottom because there's a distance between the word and the line, which looks better for non-English languages. Thanks.

[benihana]

.MYSTUFF a:link, .MYSTUFF a:visited {
text-decoration:none;
border-bottom:1px solid #ccc;
padding-bottom:3px;

}

.MYSTUFF a:link img, .MYSTUFF a:visited img {
padding:0px!important;
border:0px!important;
}

.MYSTUFF img {
border:1px solid #ccc;
}

should give text links a grey bottom border, image links no border, and non-linked images a grey border.

but im not sure what you really want:

I want only text underline, no image underline. Would appreciate any thoughts.

but that disables the border on the image only, not on the A tag. (In any case, I need the borders around the IMG, I just need to get rid of the A border).

[bedlam]

See this thread [webmasterworld.com], esp. posts 2 and following. It's the same issue except that in your case you're using a border instead of a background. The important thing to realize is that contextual selectors such as 'a img' aren't going to help in this case because the border is on the link.

-B