No background color for sticky first line when scrolling to right

Robert Prins

unread,

Apr 3, 2023, 11:57:51 AM4/3/23

to

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?
--
Robert AH Prins
robert(a)prino(d)org
The hitchhiking grandfather @ https://prino.neocities.org/
Some useful(?) REXX @ https://prino.neocities.org/zOS/zOS-Tools.html

Ben Bacarisse

unread,

Apr 3, 2023, 5:00:12 PM4/3/23

to

Robert Prins <rob...@prino.org> writes:

> 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?

Add width: fit-content; to the style.

--
Ben.

Apd

unread,

Apr 3, 2023, 5:24:31 PM4/3/23

to

"Ben Bacarisse" wrote:

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

unread,

Apr 4, 2023, 2:55:50 AM4/4/23

to

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

Robert

--
Robert AH Prins
robert(a)prino(d)org

The hitchhiking grandfather - https://prino.neocities.org/
Some REXX code for use on z/OS - https://prino.neocities.org/zOS/zOS-Tools.html

Apd

unread,

Apr 4, 2023, 4:25:52 AM4/4/23

to

"Robert Prins" wrote:
> On 2023-04-03 21:24, Apd wrote:
>> "Ben Bacarisse" wrote:
>>> 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".
>
> 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

unread,

Apr 4, 2023, 11:47:58 AM4/4/23

to

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 AH Prins
robert(a)prino(d)org

Robert Prins

unread,

Apr 5, 2023, 4:51:50 AM4/5/23

to

On 2023-04-04 09:55, Robert Prins wrote:
> On 2023-04-03 21:24, Apd wrote:
>> "Ben Bacarisse" wrote:
>>> Robert Prins writes:
>>>> 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?
>>>
>>> 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".
>
> 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?

Apd

unread,

Apr 5, 2023, 10:57:09 AM4/5/23

to

"Robert Prins" wrote:
> 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

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

> 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

unread,

Apr 5, 2023, 2:15:46 PM4/5/23

to

On 2023-04-05 14:56, Apd wrote:
> "Robert Prins" wrote:
>> 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
>
> Pgup, pgdn, home and end work as expected without the "ctrl" modifier.

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

>> 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>

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

Thanks,