Menu triangle/arrow issue (pure CSS) - css

Question

I have a triangle next to menu items, using pure CSS. It works flawlessly in Internet Explorer and Firefox but Chrome crops the bottom of the arrow. Here's some screenshots of the issue:
Here is the CSS I'm using:
/*menu arrows */
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.arrowspriteselected {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.leftish li:hover .arrowsprite {
border-top:5px solid #444444;
}
.leftish li:hover .arrowspriteselected {
border-top:5px solid #444444;
}
The HTML is:
<li>Wanted <span class="arrowsprite"></span></li>
Does anyone see any glaring problems in my CSS?

Answer 1

Try setting display to inline-block for your .arrowsprite rule. See this fiddle for an example.
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
display:inline-block;
}
It's working for me in Chrome 14.0.803.0 dev.

Answer 2

I'm not able to reproduce what you see in Chrome 12.0.742.112. For me, the span didn't even show up with that CSS and HTML. However, I tried putting in a non-breaking space, and then I was able to see it and it displayed fine.
<li>Wanted <span class="arrowsprite"> </span></li>
Here's a fiddle to compare with and without the non-breaking space. Notice that on Firefox at least the method gives more space (no pun intended), so see if you can still make it do what you want. If you can't, the next thing to try would be a float for your list elements (See this question for why).