Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
User avatar
mainziman
Moongazer
Moongazer
Posts: 10
Joined: 2021-02-03, 15:02

Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by mainziman » 2021-12-17, 21:38

Hello,

is it a bug on the site or is it Palemoon,
scroll down where you can see the 3 creditcard images
there seems to be a mixup between the left 'topic-column' and the 3 'content-columns'

this should look like this:
Clipboard 1.png
Walter

User avatar
pale guru
Moonbather
Moonbather
Posts: 61
Joined: 2021-11-06, 11:10
Location: Tyskland

Re: Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by pale guru » 2021-12-19, 03:39

The site uses <div> and <ul> tags for the table, as well as CSS:

transform: translateY(0);
}
*, *::after, *::before {
box-sizing: border-box;
}
both supported from Firefox 3.5 on.

I don't see any definition of the field height, so row 1 and 4 look different in Pale Moon, Basilisk, as well as Firefox (91 ESR).

Looks to me like “developed for Chrome“ or something. ;)
… tanning in dimmed LCD light. – Evry 1′s a beginner, baby, that's the truth…

User avatar
gepus
Keeps coming back
Keeps coming back
Posts: 938
Joined: 2017-12-14, 12:59

Re: Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by gepus » 2021-12-19, 08:03

pale guru wrote:
2021-12-19, 03:39
..., as well as Firefox (91 ESR).
78 ESR I tested with displays the page as shown in the OP's screenshot.

(Chromism aka "modern" web)

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 933
Joined: 2021-01-26, 11:18

Re: Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by Kris_88 » 2021-12-19, 09:07

pale guru wrote:
2021-12-19, 03:39
I don't see any definition of the field height
But they are present.
Probably there is some problem with the script in older browsers.
Untitled.png
Untitled.png (17.97 KiB) Viewed 394 times

User avatar
mainziman
Moongazer
Moongazer
Posts: 10
Joined: 2021-02-03, 15:02

Re: Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by mainziman » 2021-12-19, 14:55

the screenshot was made with Firefox 91.4.1esr, and I used the latest Palemoon;
Kris_88 wrote:
2021-12-19, 09:07
Probably there is some problem with the script in older browsers.
and in latest Palemoon ...

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Row-mixup in 'table' at https://www.r-card-service.at/de/karten.html

Unread post by Moonchild » 2021-12-19, 17:54

For some reason the website constructs this pseudo table from DIVs in vertical flex boxes but does not set the height of the various elements in css but rather after the fact through JS with DOM style manipulation. This is not only illogical but also clearly doesn't care that the resulting page will have to be reflowed and re-rendered multiple times before it is static to display. In addition, this style change

Looking a little further, it became clear that this website uses Angular (Google's layout framework) and is (of course) not browser agnostic, because Google's framework of course exclusively targets Google's browser engine.

This website would literally be better off using an actual table styled with css, resulting in dramatic reductions of page weight, increase in page performance and above all being able to render on every browser under the sun, even those that disable JS.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked