Bullet List Background Image - Alignment Issue in Webkit (Safari/Chrome)

HTML & CSS
1

Hi,
We have a fairly simple left side subnavigation list on a site that we’re using a background image for the bullets. The vertical alignment of the bullets image should align to the center of the menu text next to it. In IE & FF, this works great in all cases, including when there is nested UL’s for the second-level menu items.

But in Safari and Chrome, the alignment of the bullet image when there is a nested UL drops a bit so it aligns with the bottom of the text. When there is no nested UL, it aligns properly and everything looks correct.

  • Anybody want to take a stab at this one?

The only thing we see when using developer tools is that it appears the extra bit of padding above the text in the li’s disappears in Safari/Chrome when there is a nested UL. Not sure why.

Here’s a link to a page that has one menu item with the nested 2nd-level menu item (Staff & Faculty). Notice the right-angle quotes image next to that bottom link (Staff & Faculty) sits too low in Safari/Chrome only.
Menu Bullet Alignment Test

THANKS!

2

The line-height you have specified isn’t browser friendly as far as how each browser creates the line height, if you set line-height: 16px which i have personally tested the issue resolves itself and displays the same in all browsers.

3

It looks like a bug caused by the inline anchor running straight into a block level ul (my pet hate) and the text gets shifted up. The background image arrow is in exactly the same place but the text on that line is shifted up (add a background color to the list element and you will clearly see this).

If you set the anchor to display:block and then apply some top padding you will get some consistency.


#internalLeftColumn ul.sub-menu  a{
display:block;
padding-top:4px;
}

Changing the line-height as suggested by SgtLegend will also make it look better but was still a couple of pixels out in my tests.

4

Thanks Paul! Learn something a little new every day with this.

We had tried different things with the line-height, but nothing was completely consistent and/or giving us the line-height we needed on both the top-level and secondary list items.

We had actually originally had the images on the a tags (not the li’s). But things weren’t wrapping nicely with long lines. Now making those elements block items allowed us to go back to the original way of having the bullet images on the links instead of the list items. Was going back-n-forth on this trying to think of the pros/cons to having the images be on the links or li’s. We’ll stick with this for now if it’s 100% browser consistent.