Layout discrepancy on w3.org: calendar icons

[koalie]

In the screenshot underneath, the top date appears against the solid line of the year portion of the calendar image. This is from Firefox (Mac OS), where I’ve set my font size to by 9 (Proportional: serif; Size: 9).

The same was reported on Firefox on Linux with a minimum font size of 12.

The same is true for other places where we show the calendar icon (e.g. our events cal or videos/podcasts.

Tanya indicated she couldn't reproduce this on Chrome, Firefox and Safari; and Antonio that he couldn't reproduce the issue on Linux; not with Chromium nor with Firefox.

Antonio noted:

I'll see if we can tweak the CSS slightly to ensure there's some padding in all cases..

[tripu]

After examining again the layout of those little calendars, I suggest we switch to a SVG version of them; it would be easier to place those three <span> (.dtstart, .dd-mmm, .dd-mmm). As it is now, changes in zoom or in font sizes cause lines to be too tall or too short, thus misalignments.

WDYT, @tanyeah?