img tag gets the link underline

[plttn]

I'm trying to work through this issue on my end (so there might be a pull request for it), but if I tag an image as a link, I then get the underline under the image that I can't seem to style away, as I can't figure out what the selector would be to target the a if and only if it has a img child.

[plttn]

After doing some more reading, I realized that this is a CSS limitation that can't easily be solved.

[abevoelker]

This should be reopened as it's still an issue. In _posts/2014-06-10-see-pixyll-in-action.md, change this line:

![desk](https://cloud.githubusercontent.com/assets/1424573/3378137/abac6d7c-fbe6-11e3-8e09-55745b6a8176.png)

to this:

[![desk](https://cloud.githubusercontent.com/assets/1424573/3378137/abac6d7c-fbe6-11e3-8e09-55745b6a8176.png)](http://pixyll.com)

And the image will change from this:

To this, with the blue underline:

It's not that noticeable in this particular image, but becomes very noticeable on images with white backgrounds:

Thanks for the otherwise excellent theme!!

[plttn]

It's an issue yes, but with the way the classes are nested, I don't think it's a solvable issue without digging in Jekyll.

[plttn]

On second thought, I might have a solve for it. Gonna develop it locally and see if I can get it working.

[plttn]

Hmm, I think this might be a limitation of CSS and impossible to work around. Because the img is being nested in a a, there's no way to detect if an a contains an img via CSS. You can't nest them and then go up using a parent selector because that doesn't exist. Using :empty removes the underline from the image, but it also removes the underline from the text, as the display text in the link is enough to make it "not empty".

Applying something to the selector chain a img doesn't get rid of the underline, as that's tied to a.

I have one more idea that might work before I give up on this though.

[abevoelker]

Hmm a quick fix may be impossible, but perhaps the link underlining strategy needs to be rethought in light of this and #293 ?

[plttn]

Nothing like inconsistent CSS selections 👎 .

:empty fails to select on text existing in the element, but :only-child doesn't. My final attempt was to wrap images in a :only-child, as I was 99% sure they're alone in the DOM. However, a a in a p with other text existing in the p still counts as being an "only child" until something like an italics run or another link gets added to that p.

[abevoelker]

Ah, thanks for trying anyhow. I'm terrible at CSS so unfortunately can only offer up issue observations!

[plttn]

It feels like the only real solve is to change the links back to using the standard underline, rather than a custom defined background image. Every other possible solution has issues.

[plttn]

FWIW, I'm patching in links.css on my site, and even without much tweaking, it's already looking pretty good, and not causing issues with images. I might have a workable fix for it in a bit.

[abevoelker]

I ended up switching to a different theme, so no need to concern yourself for my sake (don't let me stop you though of course)!

[ashawley]

I believe this was introduced in #228. We could try reverting it.