The diamonds are cut in the top, because they are either too big or need to be placed differently in the user reference image:
The above screenshot is from safari 5.0.4 on OS 10.6
I also tested with some version of Chrome on OS 10.6 and webkit trunk which gave identical result. Not surprisingly, since they use the same engine.
I can verify that I'm using the default font-size. I tried messing with the
div decreasing the font size. I needed to decrease it quite a bit, to be able to get the diamonds to fit:
I hope this helps to identify a solution to make the text/diamond proportions more equal. For safari, reducing the
140% font-size to
100% makes the diamonds close to firefox size.