Hello,
When display:inline is added to an element, the element loses its text-shadow property.
Remove the display:inline, and the shadow appears.
Code: ( I left the .tibiaorange in the code so that it looks nicer to look at while debugging)
<html>
<head>
<style>
/* The display: inline; in li causes the problem */
li {
display:inline;
}
.tibiatext {
text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;
}
.tibiaorange {
color:#FF6600
}
</style>
</head>
<body>
<span class="tibiatext tibiaorange">
<ul>
<li>Mew!</li>
<li>Meow!</li>
<li>Meow meow!</li>
</ul>
</span>
</body>
</html>
Less minimal code: (Only as a reference to know what's going on on the website. But the code above behaves exactly the same)
<html>
<head>
<style>
.sound-list {
overflow:auto;
list-style:none
}
/* The display: inline; in .sound-list > li causes the problem */
.sound-list > li {
display:inline;
}
.sound-list > li:after,
.sound-list > li:before {
content:"\0022";
font-size:1.3em;
text-shadow:none;
color:black
}
.tibiatext {
font-family:Verdana,Tahoma;
font-size:8pt;
font-weight:bold;
text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;
text-decoration:none;
line-height:normal
}
.tibiaorange {
color:#FF6600
}
</style>
</head>
<body>
<span class="tibiatext tibiaorange">
<ul class="sound-list">
<li>Mew!</li>
<li>Meow!</li>
<li>Meow meow!</li>
</ul>
</span>
</body>
</html>
This code comes from https://tibia.fandom.com/wiki/Cat
EDIT:
Since it's best to have the most minimal code possible, I think this is it:
<li style="text-shadow:0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;display:inline;">abcdefgh</li>
Or even:
<li style="text-shadow:0.2em 0.2em 0.08em #000;display:inline;">abcdefgh</li>
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too