Cancelling a link border when link applied to an image

[Martin Lucas-Smith]

Tricky one this...
Basically I have a link style:
a {border: 1px solid gray}

but I don't want the border added when a link is applied to an image, i.e.
<a href="#"><img src="foo.jpg"></a>

Neither of:
a img, img a {border: 0;}
will work, for the reasons given in
https://bugzilla.mozilla.org/show_bug.cgi?id=303564
Here's an example page showing the code:
http://tinyurl.com/bx82d

Can anyone suggest a way of achieving this?

Martin

[Els]

Martin Lucas-Smith wrote:

Tricky one this...

Basically I have a link style:
a {border: 1px solid gray}

but I don't want the border added when a link is applied to an image, i.e.
<a href="#"><img src="foo.jpg"></a>

Neither of:
a img, img a {border: 0;}
Of course not.
"a img" is the image inside the <a> element, which doesn't have a
border. It's the <a> element that has the border.
"img a" is the <a> element inside the image, which seems impossible to
me.
will work, for the reasons given in
https://bugzilla.mozilla.org/show_bug.cgi?id=303564
That's an invalid bug report.
Here's an example page showing the code:
http://tinyurl.com/bx82d

Can anyone suggest a way of achieving this?

You could give every <a> that holds an <img> a class to indicate that,
and set
a.class{border-bottom:none;}
in your styles.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Nick Lowe - Sound Of Breaking Glass