LAST EDITED ON Oct-26-24 AT 02:56 PM (EDT)
 
A user (edit to note: unnamed because I assume, since they reached me out-of-band rather than post about it here, they prefer to remain anonymous, not because I don't believe in giving credit where it's due) recently provided me with a bit of code to add to the headers of the story files that are in styled HTML. It makes the text scaling/width look better on mobile devices with their weird screen resolutions, and it works nicely, except for one weird-ass little thing. On my PC, the standard music cue styling in those files verrry slightly misbehaves, but only in (naturally) the browser I usually use.

Here's what it looks like on Chrome (which is what it's supposed to look like):

... and here's what happens in Firefox.

I doubt this is even worth debugging, I just think it's funny. Modern software! Push one thing, something else falls off. :)

--G.
-><-
Benjamin D. Hutchins, Co-Founder, Editor-in-Chief, & Forum Mod
Eyrie Productions, Unlimited http://www.eyrie-productions.com/
zgryphon at that email service Google has
Ceterum censeo Carthaginem esse delendam.

Ah yes... I get these kinds of stupid styling issues from time to time. I work in application development, and while we're ostensibly only caring about Chrome these days, we do still have to keep -EDGE- of all things, from being too broken.

>Ah yes... I get these kinds of stupid styling issues from time to
>time. I work in application development, and while we're ostensibly
>only caring about Chrome these days, we do still have to keep -EDGE-
>of all things, from being too broken.

Isn't Edge just Chrome trying to look inconspicuous in a Microsoft windbreaker and sunglasses?

--G.
-><-
Benjamin D. Hutchins, Co-Founder, Editor-in-Chief, & Forum Mod
Eyrie Productions, Unlimited http://www.eyrie-productions.com/
zgryphon at that email service Google has
Ceterum censeo Carthaginem esse delendam.

I guess I'll out myself, then. I contacted you out of band with the suggestion because I thought it would seem less like I was nagging you about something minor if I didn't do it in public.

I don't particularly care about being credited for it, though. I am mainly making this post to observe that I also use Firefox primarily, I also see this odd little visual glitch, and I have no idea how to fix it. :-/

LAST EDITED ON Oct-28-24 AT 09:41 PM (EDT)
 
Having poked at it with developer tools, I think I've found the problem CSS in question. specifically:
.cue::before { content: "/*";
display: inline-block; width: 0;
position: relative; left: -1.75em;
}

if you remove the 'width:0;' it display correctly in firefox

(edit: because I copied .cue::after the first time, and meant ::before )

also,

>if you remove the 'width:0;' it display correctly in firefox

Another day, another couple of hundred files to edit. I think I'll save that for sometime when I'm feeling really neurological. :)

Thanks, though! I'd certainly never have figured that out.

--G.
-><-
Benjamin D. Hutchins, Co-Founder, Editor-in-Chief, & Forum Mod
Eyrie Productions, Unlimited http://www.eyrie-productions.com/
zgryphon at that email service Google has
Ceterum censeo Carthaginem esse delendam.

> Another day, another couple of hundred files to edit. I think I'll save that for sometime when I'm feeling really neurological. :)

It may be worth pulling some of that into an external stylesheet, if it's consistent across multiple html files, and just referencing that sheet in all of them... by-reference is usually (but not always, of course) better than copy :)

for extra added fun, you can do a light and dark mode stylesheet. On one of my webaps, I have (in the head of every page):

<link href="foo.css" rel="stylesheet" media="screen and (prefers-color-scheme: light)" />
<link href="foo_dark.css" rel="stylesheet" media="screen and (prefers-color-scheme: dark)" />
<link href="foo.css" rel="alternate stylesheet" title="Light Mode (default)" />
<link href="foo_dark.css" rel="alternate stylesheet" title="Dark Mode" />

those look similar to each other, yes (there are two sets, each referencing foo.css and foo_dark.css) -- the second set ("alternate stylesheet") give the use the ability to select a specific one from view > page style. The first set, though, are magic...they detect the browser's dark or light mode (via the 'media' keyword) and automagically choose the correct stylesheet. It took me the better part of an afternoon and significant googling to work THAT out...so here, saved you search time, if you're interested :)