H. G. Muller wrote on Sun, Oct 1, 2017 05:21 PM UTC:
I have been working on improving the typography of the site today. If you need a specific font size, I suggest you use absolute values instead of relative values. Inspecting the generated source on one of your diagrams, it looks like you might have already done this. I saw a font size of 7px for each TD instead of xx-small.
I have indeed tried a lot of things, but no luck so far. The best explanation of the problem (extra margin below images) that I could find is here. It gives a number of possible solutions / work-arounds, (some of which also mentioned on stackoverflow.com) and I tried them all, but none of them has the slightest effect.
I had this problem of extra margin below images before, and the xx-smal font did ameliorate it (but still required the square size to be defined 3 pixels larger than the actual images, 53x53 for Alfaerie). But this work-around stopped working, and setting an absolute size of 7px doesn't make any difference. It seems completely ignored, as for a 7-px font the descenders should only be ~3px, the margin I already account for. But they are obviously much larger.
I would prefer to make the problem go away completely. But defining the images with an in-line style="display:block;" has no effect, and eather has the "float:left" or "vertical-align:top". (I tried on FireFox and Chrome.) I can live with the work-around of a small font. But I have no idea why that stopped working. What was changed? Did you define another DOCTYPE, or another size default font? All articles are suddely in a ridiculously large font.
I can try a negative margin under the images; testing locally it responded to that, and I could even have the images stick out under the cells. It would be tricky to find a margin size that works for all image sizes, and would be robust against future typography chages if I don't know what I am combatting here. Setting a fixed size of the page width doesn't seem a satisfactory solution. Anyway, setting a size for the cells never succeeded in making this problem goeas away: if the image (+added margin) is larger than the width I specify, it just expands the cell to fit the image, rather than clipping the image. Do you know a way to get around that?
[Edit]
Uh? I now changed the font in the <td> elements to xx-large, and this made the problem go away entirely. The images themselves have style="veritical-align:top", but in combination with font-size:xx-small that did not have the slightest effect.
I have indeed tried a lot of things, but no luck so far. The best explanation of the problem (extra margin below images) that I could find is here. It gives a number of possible solutions / work-arounds, (some of which also mentioned on stackoverflow.com) and I tried them all, but none of them has the slightest effect.
I had this problem of extra margin below images before, and the xx-smal font did ameliorate it (but still required the square size to be defined 3 pixels larger than the actual images, 53x53 for Alfaerie). But this work-around stopped working, and setting an absolute size of 7px doesn't make any difference. It seems completely ignored, as for a 7-px font the descenders should only be ~3px, the margin I already account for. But they are obviously much larger.
I would prefer to make the problem go away completely. But defining the images with an in-line style="display:block;" has no effect, and eather has the "float:left" or "vertical-align:top". (I tried on FireFox and Chrome.) I can live with the work-around of a small font. But I have no idea why that stopped working. What was changed? Did you define another DOCTYPE, or another size default font? All articles are suddely in a ridiculously large font.
I can try a negative margin under the images; testing locally it responded to that, and I could even have the images stick out under the cells. It would be tricky to find a margin size that works for all image sizes, and would be robust against future typography chages if I don't know what I am combatting here. Setting a fixed size of the page width doesn't seem a satisfactory solution. Anyway, setting a size for the cells never succeeded in making this problem goeas away: if the image (+added margin) is larger than the width I specify, it just expands the cell to fit the image, rather than clipping the image. Do you know a way to get around that?
[Edit]
Uh? I now changed the font in the <td> elements to xx-large, and this made the problem go away entirely. The images themselves have style="veritical-align:top", but in combination with font-size:xx-small that did not have the slightest effect.