www.webdeveloper.com
Results 1 to 3 of 3

Thread: Using UL class - two bullets appear in one line

  1. #1
    Join Date
    Jul 2013
    Posts
    1

    Unhappy Using UL class - two bullets appear in one line

    Hi,

    I'm trying to use the instructions here to create a ul list type with orange bullets. I also have a UL with blue bullets. (Background is I just inherited this site, blue bullets are from previous admin)

    There are two problems. The biggest is that both the blue and the orange bullets show up when I use the orange bullet UL class. The second is that I can't seem to get the spacing to work from the instructions in the link above so the orange bullet appears in the middle of the text.

    CSS:
    ul {
    list-style-image: url("bluebullet.png");
    }

    ul.smallorng
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    .smallorng li
    {
    background-image: url("smallorangebullet.png");
    background-repeat: no-repeat;
    background-position: 1 em;
    padding-left: 20 em;
    }


    HTML:
    <ul class="smallorng">
    <li>item 1</li>
    <li>item 2</li>
    </ul>

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,115
    It's hard to troubleshoot without having the images, but if you just want orange bullets, you can try this simple trick:
    http://jsfiddle.net/u7quB/

    (as long as you can change the HTML)
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jul 2013
    Posts
    1
    PCVC,

    If I understand correctly, I think you're problem here is that you're applying the orange background to the list item, rather than the UL list style type - that's why the orange bullet is appearing in the middle of the text.

    Try this instead:

    ul {
    list-style-image: url("bluebullet.png");
    padding: 0;
    margin: 0;
    }

    ul.smallorng {
    list-style-image: url("smallorangebullet.png");
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles