Menu triangle/arrow issue (pure 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:

Screenshot of menu in Firefox
Screenshot of menu in Chrome
Screenshot of menu in Internet Explorer 9

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?

I know the question has already been answered, but have you considered using a Unicode character (U+25BC Black down-pointing triangle, or U+25BE Black down-pointing small triangle)? — Nathan Ryan, Jul 10 '11 at 18:27

score 3 · Accepted Answer · answered Jul 10 '11 at 03:07

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.

score 2 · Answer 2 · edited May 23 '17 at 12:16

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">&nbsp;</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).

Menu triangle/arrow issue (pure CSS)

2 Answers2