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 try and 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
Xêrxe
New to the forum
New to the forum
Posts: 2
Joined: 2022-06-21, 17:46

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: 32624
Joined: 2011-08-28, 17:27
Location: Tranås, 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
"The best revenge is to not be like the person who wronged you." -- Marcus Aurelius
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb

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

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.
"There are two sentences inscribed upon the Ancient oracle... 'Know thyself' and 'Nothing too much'; and upon these all other precepts depend." -- Plutarch

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 32624
Joined: 2011-08-28, 17:27
Location: Tranås, 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.
"The best revenge is to not be like the person who wronged you." -- Marcus Aurelius
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb

User avatar
Xêrxe
New to the forum
New to the forum
Posts: 2
Joined: 2022-06-21, 17:46

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: 32624
Joined: 2011-08-28, 17:27
Location: Tranås, 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
"The best revenge is to not be like the person who wronged you." -- Marcus Aurelius
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb

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

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.
"There are two sentences inscribed upon the Ancient oracle... 'Know thyself' and 'Nothing too much'; and upon these all other precepts depend." -- Plutarch

Post Reply