parsiya / Hugo-Octopress

Port of the classic Octopress theme to Hugo
MIT License
155 stars 52 forks source link

<a href> with an <img> as content causes underscores #46

Closed simonszu closed 6 years ago

simonszu commented 6 years ago

I am testing hugo's new image resource feature, and noticed this little bug:

I have the following setup: An image is put into a post's resources and included in a way that in the post a scaled version of the image is shown, which is a hyperlink to a full-sized version of the image, so basically:

<a href="fullsize.jpg>
<img src="scaled.jpg">
</a>

I have noticed that in this situation some underscores appear next to the scaled image (which are no text chars, since they don't appear in the HTML source), which are clickable as a hyperlink to the fullsize image, so they seem to be a part of the content. The only way to make them disappear was to remove the , which takes the ability to link to the fullsize image.

An example can be seen here with Google Chrome and Internet Explorer under the bottom-left corner of the movie poster. I think this is an issue of the hugo-octopress template, since there is a discussion thread about the new image resource feature, with a screenshot with the same setup from another template, where these underscores don't seem to appear.

simonszu commented 6 years ago

Further investigation:

Further investigation led me to the conclusion that these underlines disappear when you set text-decoration to none for all hyperlinks. I added a custom shortcode for this element and added this CSS attribute inline.

parsiya commented 6 years ago

Thanks for the bug report. From my brief look it seems like it happens because of the padding around the figure and is related to CSS. I am gonna look at it an experiment later this week.

You commented just as I was writing. I am gonna re-open the issue and try to fix it in the CSS.

parsiya commented 6 years ago

Should be working now, thanks for the issue.