SitePoint Sponsor

User Tag List

View Poll Results: Which CSS-based bullet-point customisation method do you prefer?

Voters
2. You may not vote on this poll
  • Option One [See Below]

    0 0%
  • Option Two [See Below]

    2 100.00%
  • Other [Please Share!]

    0 0%
Results 1 to 5 of 5
  1. #1
    SitePoint Addict dgroves's Avatar
    Join Date
    Jan 2007
    Location
    Bath, UK
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Bullet Point Methods

    Currently I have been customising a lot of bullet point for a website, but I hvae began to wonder what is the best way to do it? So you hvae your XHTML that looks like this:
    Code XHTML1Strict:
    <ul>
        <li>Bullet Point 1</li>
        <li>Bullet Point 2</li>
        <li>Bullet Point 3</li>
        <li>Bullet Point 4</li>
        <li>Bullet Point 5</li>
    </ul>

    And then you have your CSS.

    OPTION ONE
    So, the first option is to use the built in CSS list-style-image property.
    Code CSS:
    ul {
        list-style-image: url(bullet.png);
    }

    Now, this is the easiest method but I'm sat here with Dan Cederholm's "Web Standerd Solutions" on my lap; and I quote:
    "This is the simplest method; however, it renders somewhat inconsistent result in some browsers in respect to the vertical positioning of the image. Some browsers will line it up directly in the middle of the list item text; other may position it slightley higher. It's a bit inconsistent. "

    OPTION TWO
    The second option takes a little more CSS, but is Dan Cederholms advised method.
    Code CSS:
    ul {
        list-style: none;
    }
     
    ul li {
        background: url(bullet.png) no-repeat 0 50%;
        padding-left: 17px;
    }

    Now, I find that this second method works perfectly, up until the point where I get a bullet-point that rolls over the line. Now it appears between the two line - and looks ****. Obvisly, this is down to the way that background is position [i.e. 50% down the bullet point].

    If anybody has a better solution, please discuss - and vote on your favroute method above. Thanks!

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i go with the second option...

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I use the second method for consistency but don't place the bullet at 50&#37; because when the text wraps it will look odd. Just use an em setting for the top position so that it lines up with the first line of text.

    Code:
    background: url(bullet.png) no-repeat 0 .5em;

  4. #4
    SitePoint Addict dgroves's Avatar
    Join Date
    Jan 2007
    Location
    Bath, UK
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I use the second method for consistency but don't place the bullet at 50% because when the text wraps it will look odd. Just use an em setting for the top position so that it lines up with the first line of text.

    Code:
    background: url(bullet.png) no-repeat 0 .5em;
    Paul, YOU ARE A GENIUS!

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually do it the same way as Paul, but sometimes vertically centring can look ok depending on the graphic.


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
  •