SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <li> problem :: How to make appear list-style-image while choosing display:inline

    Dear all CSS experts,

    I'm stuck in one problem. I'm not being able to make image appear [list-style-image] while choosing display:inline for horizontal menu. It works fine if I use display default.

    Here's my css :

    #bottom_links ul
    {
    margin:0px;
    padding:0px;
    }

    #bottom_links li
    {
    list-style-image:url(../images/bottom_link_arrow.gif);
    display:inline;
    }

    Here's my html :

    <div id="bottom_links">
    <ul><li><a href="#">asdasdf</a></li>
    <li>asdasdf</li><li>asdasdf</li></ul>
    </div>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello, and welcome to Sitepoint

    It's nearly always better to use background images rather than list-style-image as they are positioned much more consistently cross-browser, I float the li items so that they are block level and are easier to control. We just give the element a little left padding as well to move it out of the way of the background image.
    Code:
    <ul id="bottom_links">
      <li><a href="#">asdasdf</a></li>
      <li>asdasdf</li><li>asdasdf</li>
    </ul>
    Code:
    #bottom_links {
      margin:0;
      padding:0;
      list-style: none;
    }
    #bottom_links li {
      float: left;
      background-image:url(../images/bottom_link_arrow.gif) no-repeat 0 0;
      padding-left: 10px;
    }
    Hope it helps

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi

    When you make the list display:inline the it is no longer display:list-item and therefore list images and bullets won't apply to it.

    See my post below for a thorough explanation and solution.

    http://www.sitepoint.com/forums/show...99#post3580799

    Or use a background image as mark suggests above

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx yellowshoe,

    That trick worked well for me. Thanx for that. However, I'm wondering how come css not being able to work display:inline and list-style-image:url (""); together ......

    Thanx again.

    Sayamish

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Paul said the reason why above, when you set a li element to display inline you lose it's list-like properties, as list-style-image sets the 'bullet' to an image it can't be seen because an inline element doesn't have 'bullets' only list-item's have bullets.

    In any case - the browsers render a background image much more accurately so should always be used instead.

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx for ur helpful updates.


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
  •