6

I have this code:

<button class='arrow month'>&#x25C2;</button>
<button name='nv' value='2011' class='month selected'>2011</button>
<button class='arrow month'>&#x25B8;</button>

...to output this:

enter image description here

Everything's groovy, except the unicode "entities" are making the line fatter!

Why is this happening and is there a fix?

To illustrate further, here's the same HTML, with an entity included:

<button name='nv' value='2011' class='month selected'>2011&#x25B8;</button>

enter image description here

Friedrich -- Слава Україні
  • 2,901
  • 1
  • 21
  • 40
Ben
  • 54,723
  • 49
  • 178
  • 224
  • 1
    Can you paste the CSS for this? The entities don't add any extra height when I try this on a clean CSS reset. – melkamo Mar 26 '11 at 05:36

2 Answers2

3

It will wholly depend on what fonts you've got. If the browser's default font doesn't have a glyph for character U+25C2, it'll try to fall back to another font that does contain that character. That fallback font might have a different line-height.

If you want a fixed-height button, ask for it by specifying a fixed height style.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Apparently this is indeed the problem - http://www.fileformat.info/info/unicode/block/geometric_shapes/fontsupport.htm. And while we're following links, http://www.hackvalue.nl/en/article/103/finding_the_right_utf-8_symbol fills in a few blanks too. Cheers. – Ben Apr 04 '11 at 05:44
2

I add line-height: 16px; and solved.

Martin Zvarík
  • 2,120
  • 22
  • 27