I've been using a custom code to display the level 2 header (<h2></h2>) on my wiki in the Fandomdesktop.css file.
It is supposed to show a gray parallelogram in the back while showing an upright text or image when it is displayed on a page.
I recently noticed that it seems to only work on Mozilla Firefox (my preferred browser). All other browsers have a slanted appearance. Is there any way to fix this issue?
Example for page using multiple header level 2:
https://anthem.fandom.com/wiki/Coda
Also, another issue is that any image used within header level 2 will always be oblique. Is there any way to make all content except the gray parallelogram upright?
Example for page using image in the header level 2 (Please ignore the color of the table captions, they will be corrected soon):
https://anthem.fandom.com/wiki/Library
CSS file:
https://anthem.fandom.com/wiki/MediaWiki:Fandomdesktop.css
Custom header 2 code:
h2 .mw-headline{
transform: skewX(25deg);
background-color: gray;
width: 95%;
padding: 2px 7px 3px 7px; /* padding: top right bottom left;*/
margin-left: 10px;
font-family: Tahoma;
font-size: 1.21em;
font-weight: normal;
color:#fae8c6;
text-shadow: 2px 2px #0d2529;
font-style: oblique 25deg;
}
(Sorry about the tags. Couldn't find any that were more relevant to the topic.)