IE11 style background-color

Question

I have a weird problem with IE11(works in chrome and edge), in certain situations the background-color hides the text above it, trying to find out an update to IE11 to fix it, if exists(company computers, due to certain limitations cant use enterprise mode and cant update all users to win10, also can't fix the html since its generated from outlook outside the company) here is the most simplified version

<p style="direction: rtl;">
  <span dir="LTR" style="color: black; background-color: yellow;">Why Am I Yellow</span>
</p>

If anyone can help find a fix, or maybe even an IE11 version where it works it will be appreciated.

Arthropod

It would help others understand the problem if you could add screenshots for IE and any other browser. – Kuopio

Answer 1

Making the span inline-block seems to fix the issue on my IE11 (version 11.0.9600.19267)

<p style="direction: rtl;">
  <span dir="LTR" style="color: black; background-color: yellow; display: inline-block;">Why Am I Yellow</span>
</p>

Andie

I was able to fix this by adding style="direction: rtl; to span. Just curious to know which one should be appropriate. – Structural

@Structural I am curious to know why it's not working initially. – Andie

If i remove dir="LTR" attribute from span it works without changing/adding any css. – Structural

thanks for the response but as i said i cannot modify the html, and the problem stems from the opposing directions between the p and the span. by removing one of them or changing the direction of both to either RTL or LTR the problem will be fixed. sadly i need a solution that doesn't change the html since i have no control over it – Arthropod

@Arthropod you cannot even add a small CSS code? I didn't change the HTML, I simply add one CSS line that you can link outside – Andie

@TemaniAfif The html I added to my question is the minimalist version to replicate the issue, the real html is part of an outlook mail that we regularly receive into our system from outside(user generated), that we show on our web interface of our system, even if i want to fix this using css its impossible, since there is no hardcoded format to the html i can't do anything about it. In-fact we have already identified 6 other cases where this problem occurs and the hierarchy to the problematic text is different in each one, plus due to laws and regulations changing even the css is forbidden – Arthropod

Answer 2

As you had mentioned in your question that HTML is generated from Outlook from outside your organization so modifying the HTML is not an option for you.

I try to make a test with your code in IE 11 and I am able to produce the issue.

I know your users are not able use the Enterprise mode. If they can add this site to Compatibility view manually than it can fix this issue.

Please check the testing result below.

Reify

thanks for the reply i'll try this and check if this solution doesn't screw up the rest of the site. i'll reply either way – Arthropod

Sadly while the compatibility setting didn't mess up the website, it also didn't fix the problem. maybe because its inside tons of frames and iframes. if you have another solution it will be appreciated – Arthropod

We need exact code which can reproduce the issue than we can try to test it and suggest more accurate solutions. which may help to solve your issue. – Reify

The html is part of a mail written in outlook with a mixture of rtl(main) and ltr(sub) languages, in certain situations this will occur, thus we have no way to influence/get to the problematic code. that's why I wanted to find a fix by fiddling with IE11 since we have absolutely no way to address the source of the issue. In addition the mail is received from outside the company and we cannot enforce anything there, so the only option is to fix it on the IE side – Arthropod

As you said in your last comment that,'in certain situations this will occur'. As we are not aware about that specific situation it is not possible for us to reproduce it. even if we try to use the mixture of rtl(main) and ltr(sub) languages. it is better if you post any sample code. – Reify

I have no code, the user just writes stuff and highlights it, I have no way to know or even ask what he did, as far as i know he might even be using copy-paste from word or excel. that is why my question is not how to fix the problem, it's how to make IE11 correctly show the HTML i've provided – Arthropod

There is no any other options available in IE 11 which can fix the issue. If you are using Windows 10 machines than you can try to move to MS Edge browser may help you to avoid this issue. Thanks for your understanding. – Reify