6

I saw a link to IMDB in this post on Movies.SE site. This link text has been italicized and emboldened by the user. It says Time Enough At Last.

And now the link is hidden. It loses its blue coloring that other links receive, making it impossible to know it is a hyperlink. Can this be fixed? It's likely a conflict in CSS rules.

Android 4.4, default browser (chromium), Galaxy S5.

Notice the Wikipedia link is blue. I had not visited either url so they should not be colored differently. The same page, in full site/desktop mode, shows the same link blue, so this is just a problem on mobile web.

Just tested, on regular Safari, with the iPhone 6 user agent, it also has the same issue.

enter image description here

The Inspector shows the problem. The em style is overriding the a > em somehow in the mobile CSS.

em { color: #0C0D0E; }
a, a:visited { text-decoration: none; color: #07C }
a, a > em { color: #07C }
Improve this question
1
  • 1
    Why the heck do we even have that em { color: #0C0D0E; } style?
    – Ilmari Karonen
    Nov 24, 2017 at 23:46

2 Answers 2

Reset to default
6

The problem is that that bold and italic link text is output as

<a href="..."><strong><em>Link Text</em></strong></a>

So the a > em rule that resets the link color doesn't apply, leaving only the color being applid by the em rule. The easy fix is to also include a > strong > em in that style.

I'm not entirely sure why emphasised text has a color set at all though (maybe it's needed somewhere I can't see), It could probably just be removed:

enter image description here

Improve this answer
1
  • 1
    Or it should be a em any descendant Em of A, instead of a > em, direct descendant Em of A.
    – cde
    Feb 28, 2017 at 18:20
3

As this bug still seems to be unfixed, I've added the following custom CSS rule to fix it into my Stack Overflow Unofficial Patch (SOUP) user script:

.post-text em, .post-text a>em {
    color: inherit;
}

Basically, this just undoes the problematic rules quoted above within post text, causing <em> not to have any effect on text color whether it's inside a link or not. As far as I can tell, this fixes the problem with no harmful side effects.

Improve this answer
1
  • 1
    I'm curious why Stack Exchange don't hire you. They would have saved a lot of time fixing bugs.
    – iBug says Reinstate Monica
    Jan 25, 2018 at 1:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .