AListApart | The A List Apart front end repo | Learning library

I have a website that I designed based on the "Holy Grail" layout described in this A List Apart post. A recent Chrome update broke it. You can see the results on the example page for the article (I also made it into a fiddle). Open it in Firefox to see what it should like and in Chrome to see what's happening now.

I realize that this technique is super dated, and I have plans in place to redesign it with Flexbox. But, that will take time, and I was hoping to get it working again quickly in the meantime while I work on a redesign. You can read more about LayoutNG on this page.

Does anyone know any tips and tricks to fix this? Is there a Chrome bug already open that I can follow?

Update: I decided to test it in Canary (v79), and the layout works perfectly there. It's still broken in Beta though (v78). So, I could wait until the current Canary gets released, but that won't be until December according to current estimates. So, I would still like to find a quick fix between now and then if one is available.

Here's some code to make SO happy:

I try to build a pure CSS tree. I encountered a problem with horizontal lines between blocks (two blocks are at the same level). I isolated the problem in the following jsfiddles:

https://jsfiddle.net/8Lsv1ypd/3/

https://jsfiddle.net/8Lsv1ypd/4/

Html :

Many websites write code that have broken the ability for users to set their own font size (in the settings of the browser/mobile). In order to avoid this, what exactly happens on a technical level when the user changes the default font size? What does it affect?

• the html root element font-size that is specified in CSS? Does it scale or override this?
• the units em, px, rem, %?
• what about other units, like vh, vw, vmin, vmax for those that are trying to do fluid typography?
• how will this affect calc()?
• is the behavior the same for mobile devices?

However, none of the below refer to specifications, but are just collections of specific behaviors.

• From my own experiments, setting font-size for html with a % does scale when the user changes the browser font size.
• This answer has some information, seeming to say that when html is set, px doesn't adjust, but em, rem, % do.
• This site has some really good info, but it is all a decade old and uncertain if the behavior mentioned is just because of browser bugs or if it's designed that way.
• There is a lot of sloppy language that people use when talking about this. For example, people will talk about the 'base font size', but not specify if this is the font specified in the root/html element, the browser settings, or the combination of the two. I'm sure it's clear to those who already know the interactions, but to me I still have the concepts unclear.

In mozilla's doc for feColorMatrix it is stated that

The SVG filter element changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color.

However in feColorMatrix there are 5 columns, not 4. In an excellent article that can be considered as a classical reference it is stated that:

The matrix here is actually calculating a final RGBA value in its rows, giving each RGBA channel its own RGBA channel. The last number is a multiplier.

But that does not explain a lot. As far as I understand, since after applying filter we basically modify exactly R, G, B and A channels and nothing else there's no need in this additional parameter. Indirectly there's an evidence for that in the article itself - all numerous examples of feColorMatrix-based filters provided - all have zeroes as fifth component. Also, why it's a multiplier?

In another famous article it is stated that:

For the other rows, you are creating each of the rgba output values as the sum of the rgba input values multiplied by the corresponding matrix value, plus a constant.

Calling it a constant added makes more sense than calling it a multiplier, however it's still unclear what does fifth component in feColor matrix stands for and what is unachievable without it - so that would be my question.

My last hope was the w3c reference but it's surprisingly vague as well.

I have a textarea with a specific minimum height and based on this article I made it expandable. The problem is that it expands before it fills its minimum height,so I want it first to fill its given height and then expand.

here is a fiddle

And here is the code:

HTML:

I hear that creating a single layout page helps maintainability, I am new and about to implement this but am confused about something. If am correct, a file will serve as the layout file requiring header.php and footer.php, and all request to the server will have to pass through this one file, I also learnt from https://alistapart.com/article/succeed that redirecting to this layout page will require editing the .htaccess file. My question is what if I don't want to edit the .htaccess file and include a code in all my content pages to redirect all request to the layout file?

I am trying to get my sub-menu to appear above my body div when hovering over menu. Here is a picture of my problem since the website is not live yet.

I have been messing around with this for a while now and can't seem to figure out what I have to do to get it to work. I have a z-index value for my sub menu but it still won't show. How can I get the menu to show above the body div?

I have tried adapting this post and its alistapart links. But I can't get my three blocks in a container to act responsively and maintain their aspect ratio

I do not understand why this code