Odd bullet point style – how can I make them normal?

1 Views

My WordPress theme, styles bullet points horribly (they look like they should be expandable!). 

http://79.170.44.112/activate-enterprise.co.uk/kiryoku-leadership-programme/

What would I need to add/remove on my css to revert them back to the normal style?

Read More

Here’s my list code from my stylesheet: 

ol {
list-style: decimal;
margin: 0 0 18px 1em;
}
ol li {
list-style: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0 !important;
}

ul ul li, ul ul ul li {
border-bottom: none !important;
}

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

#container ul {
margin-bottom: 15px;
}

.content ul {
padding-left: 15px;
}

.content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden;
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px;
}

#container ul li ul li { border-bottom: none; }

Many thanks,

Sam

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. Changing these styles:

    .content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden;
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px;
}

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

    to this:

    .content ul li, .sidebar-container ul li, .slide-content ul li {
padding: 2px 0 2px 17px;
list-style-type: disc;
}

ul {
margin: 0;
padding: 0;
}

    should fix that.

    The css was removing the dot and adding that background image.

    EDIT: You might want to remove the padding: 2px 0 2px 17px; style as well, if you don’t want as much space between the dot and the text.

  2. .content ul li, .sidebar-container ul li, .slide-content ul li {
/*overflow: hidden;*/
padding: 2px 0 2px 17px;
/*background: url(images/bullet.png) no-repeat 0 10px;*/
}

ul {
margin: 0;
/*list-style: none;*/
padding: 0;
}

    With this code you should be fine.

  3. Change the following code which you have pasted above
    remove the background and add the list-style property 

    .content ul li, .sidebar-container ul li, .slide-content ul li {

padding: 2px 0 2px 17px;
list-style: square outside none;

}

  4. You are using an image here

    .content ul li, .sidebar-container ul li, .slide-content ul li {
overflow: hidden; /* disable this */
padding: 2px 0 2px 17px;
background: url(images/bullet.png) no-repeat 0 10px; /* disable this */*
}

    Disable or remove that image code and adjust as required.

    ul {
margin: 0;
list-style: none; /* disable this */
padding: 0;
}

    Be aware that this may have knock on effects on other pages.