CSS properties break personal site display on PM

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.
Xêrxe

CSS properties break personal site display on PM

Unread post by Xêrxe » 2022-08-14, 23:11

I am an HTML newbie and I have been working on making a site hosted on Neocities. In two sections of the site (namely https://xerge.neocities.org/test.html and https://xerge.neocities.org/text.html), I used flex and the vertical-rl properties to align some Japanese text within a small box. In Chromium and LibreWolf, this displays correctly, but a friend had informed me, and I checked for myself, that it does not in Pale Moon. In fact, not only does the text not display, but something about those properties seems to make the page ridiculously wide when it should not be.

I, of course, want him and others to be able to see this properly, and I likewise want to improve my code. Any suggestions or ideas on how to fix or improve this are much appreciated.

Below is the relevant CSS for the text box that is causing problems.

Code: Select all

.banner {
  font-family: serif;
  width: 50px;
  position: absolute;
  background: white;
  right: 20px;
  top: 194px;
  border: solid 2px black;
  height: max-content;
  padding: 20px;
  display: flex;
  text-align: left;
  writing-mode: vertical-rl;
  align-items: center;
  justify-content: flex-start;
}

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

Re: CSS properties break personal site display on PM

Unread post by Moonchild » 2022-08-14, 23:46

This is probably bug #1267462
"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

User avatar
athenian200
Contributing developer
Contributing developer
Posts: 1498
Joined: 2018-10-28, 19:56
Location: Georgia

Re: CSS properties break personal site display on PM

Unread post by athenian200 » 2022-08-14, 23:54

That seems like a good guess. That bug does seem connected.

For now, I noticed that the text looks pretty much correct if you change

Code: Select all

display:flex
to basically anything else, like

Code: Select all

display:inline-block
for instance.
"The Athenians, however, represent the unity of these opposites; in them, mind or spirit has emerged from the Theban subjectivity without losing itself in the Spartan objectivity of ethical life. With the Athenians, the rights of the State and of the individual found as perfect a union as was possible at all at the level of the Greek spirit." -- Hegel's philosophy of Mind

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

Re: CSS properties break personal site display on PM

Unread post by Moonchild » 2022-08-15, 07:56

Yeah for this purpose using "flex" really isn't the best solution, and not a combination is CSS properties that actually is very logical so people run into corner-case quirks of rendering engines as a result.
"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

Xêrxe

Re: CSS properties break personal site display on PM

Unread post by Xêrxe » 2022-08-15, 17:25

Thank you for your advice. I have removed flex and solved centering the text by setting the header's margin manually. However, I am having another problem now. I had been using

Code: Select all

heigh: max-content;
to make the banner's height was that of the text. However, it seems PM will not take it unless it has a vendor prefix, like this:

Code: Select all

height: -moz-max-content;
which makes it so it isn't displayed correctly on Chromium now. Of course, solving the display on PM but breaking it on another browser misses the point, so I would like to ask whether there is any way to solve this. Thanks.

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

Re: CSS properties break personal site display on PM

Unread post by Moonchild » 2022-08-15, 17:37

You should just be able to include both statements. Ones that are considered invalid will be ignored by the browser that doesn't support either prefixed or non-prefixed.
We should be able to unprefix our version or make an alias for it fairly simply, too, but obviously that will not be an instant fix
"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

User avatar
athenian200
Contributing developer
Contributing developer
Posts: 1498
Joined: 2018-10-28, 19:56
Location: Georgia

Re: CSS properties break personal site display on PM

Unread post by athenian200 » 2022-08-15, 18:00

Yeah, actually I tested the bug you linked last night before he changed anything, and I found that applying parts 5-9 to our codebase fixed the issue with his website. I noticed after I did fix that the height was wrong on one of the elements that was trying to use max-content, just like he said. I worked around it by specifying 280px, but realizing we had it implemented under a vendor prefix helps a lot more.

Overall, I'd have to say this has been one of the more productive interactions we've had with a website owner.
"The Athenians, however, represent the unity of these opposites; in them, mind or spirit has emerged from the Theban subjectivity without losing itself in the Spartan objectivity of ethical life. With the Athenians, the rights of the State and of the individual found as perfect a union as was possible at all at the level of the Greek spirit." -- Hegel's philosophy of Mind

Locked