SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,483
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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. #4
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •