Any CSS experts able to explain my problem with nested containers?

,
#1

I’m still working on my Periodic Table demo.

I have fixed some of my layout problems, but I have an annoying glitch.

The tiles in the table are supposed to be laid out like they are in the element tiddlers:

image
image2736×1744 346 KB

Note the space between the element symbol and the other properties which should be stuck close to an edge. However when running in the table, they seem to have grown some extra space away from their edges:

image
image1024×653 104 KB

Closeup:

image
image599×579 21.3 KB



There are two stylesheets relevant here:

The table is a CSS container, and the tiles are each containers (the markup is in Periodic Table for the table, in $:/_/my/templates/body for the element ViewTemplate, and in $:/_/my/macros/tile for the actual tiles.

I use the container query width units, cqw, for both the table and the stand-alone tiles. There is some complexity as the table is using these units, and the the tiles inside the table are using their own.

So if you have some CSS skills and a few minutes to check into this, I would be very grateful. Do you understand why the tiles inside the table are laying out their internal properties a bit differently than the stand-alone ones?

#2

You are setting the font-size (using cqw units), but not setting the line-height.

Try adding line-height:1em; to the table.periodic div.tile rule in $:/_/my/styles/periodic-table

1 Like
Demo: Periodic Table
#3

Thank you. That did it. I used to be pretty good at CSS (even contributing to writing a Java CSS implementation), but that was years ago. Clearly I’ve lost a little bit of my touch; I used to remember things like that. This was my first time with the new-ish cqw units and nested containers, and I was sure it had to do with that. Thank you for setting me straight.

This is fixed in https://crosseye.github.io/TW5-Chemistry/latest/. (I actually put it in the tile css, as it should apply to all tiles, wherever they’re placed.)

Thank you for your time and your expertise!

2 Likes