No background color for sticky first line when scrolling to right

[Robert Prins]

I added a sticky first line to a dump file,

<https://prino.neocities.org/@temp/dump.html>,

to make it a bit easier to see what's where, but for some reason, the background
color for the sticky part only extends to what's visible, and not the part that
scrolls right into view.

Resizing the font and reloading does color the whole top...

What am I doing wrong?

[Ben Bacarisse]

Post by Robert Prins
I added a sticky first line to a dump file,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible, and not
the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?

Add width: fit-content; to the style.

[Apd]

Post by Ben Bacarisse

Post by Robert Prins
I added a sticky first line to a dump file,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?

Add width: fit-content; to the style.

That didn't work in Firefox but for some strange reason this did:

display: inline;

It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".

[Robert Prins]

Post by Apd

Post by Ben Bacarisse

Post by Robert Prins
I added a sticky first line to a dump file,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?

Add width: fit-content; to the style.

display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".

Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)

Robert

[Apd]

Post by Robert Prins

Post by Apd

Post by Ben Bacarisse
Add width: fit-content; to the style.

display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".

Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)

Ok, mine's an older version. Other browsers may vary.

BTW, your date is in the future. From your header:

Date: Tue, 4 Apr 2023 09:55:52 +0000
Injection-Date: Tue, 4 Apr 2023 06:55:48 -0000 (UTC)

[Robert Prins]

Post by Apd

Post by Robert Prins

Post by Apd

Post by Ben Bacarisse
Add width: fit-content; to the style.

display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".

Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)

Ok, mine's an older version. Other browsers may vary.
Date: Tue, 4 Apr 2023 09:55:52 +0000
Injection-Date: Tue, 4 Apr 2023 06:55:48 -0000 (UTC)

Yes & no.

I use UTC as I'm getting sick and tired of the displayed times of files changing
when I move between time zones and/or change between summer- and winter time,
and/or when I unpack archives.

Robert

[Robert Prins]

Post by Robert Prins

Post by Ben Bacarisse

Post by Robert Prins
I added a sticky first line to a dump file,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?

Add width: fit-content; to the style.

  display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".

Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)

This all works swell, however, I now have two other problems:

1) Ctrl-PgUp no longer works, as the top-of-page is already at the top, and

2) If I use the ":target" pseudo-selector, it does highlight the target, but it
also scrolls it behind the fixed sticky line (unless I'm somewhere at the very
bottom). Tried using two <div>'s to split the <body> added a "top:1" to the
"target" CSS, but that doesn't change anything, so any clues how I can solve
these ones?

Robert

[Apd]

Post by Robert Prins
1) Ctrl-PgUp no longer works, as the top-of-page is already at the top

Pgup, pgdn, home and end work as expected without the "ctrl" modifier.

Post by Robert Prins
2) If I use the ":target" pseudo-selector, it does highlight the target,
but it also scrolls it behind the fixed sticky line (unless I'm somewhere
at the very bottom). Tried using two <div>'s to split the <body> added a
"top:1" to the "target" CSS, but that doesn't change anything, so any
clues how I can solve these ones?

A couple of ways here:
<https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html>

[Robert Prins]

Post by Apd

Post by Robert Prins
1) Ctrl-PgUp no longer works, as the top-of-page is already at the top

Pgup, pgdn, home and end work as expected without the "ctrl" modifier.

Should have been Ctrl-Home, which doesn't do anything.

Post by Apd

Post by Robert Prins
2) If I use the ":target" pseudo-selector, it does highlight the target,
but it also scrolls it behind the fixed sticky line (unless I'm somewhere
at the very bottom). Tried using two <div>'s to split the <body> added a
"top:1" to the "target" CSS, but that doesn't change anything, so any
clues how I can solve these ones?

<https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html>

Almost PL/I, where there are usually also several ways to skin a cat. ;)

Thanks,

Robert