Home/ Questions/Q 9238613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:48:09+00:00

I have a list that resembles: <ol> <li class=node>1</li> <li class=node>2</li> <li class=node>3</li> <li

  • 0

I have a list that resembles:

<ol>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ol>

I am using images to replace their default bullet points in CSS. Separate images are used for the end node as well as another image for all other bullet points. The images display, however as soon as I add these images a 4 pixel padding is somehow added to the top and bottom of each list item. This extra spacing changes the height from 26 pixels high to 34 pixels high. This gap provides about an 8 pixel separation between the different bullet point images which were meant to have a 0px separation as per my design.

The CSS I made:

li {
    margin: 0;
    padding: 0;
    border: 0;
}
li.node {
    list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
    list-style-image: url('../imgs/nodes/ur.png');
}

Is there any way to remove this spacing? I have tried removing all things padding/spacing/border related to all li’s, but nothing so far.

EDIT:

I do not think I am making my question clear enough, so I am posting the image of what it looks like on my end.

Example of what the problem is.

The joining bars as you see in the image above are supposed to be connected (as if one continuous image). Removing the special CSS images for bullet points reduces the height of each item to the height of the CSS bullet point image (as I have tested using Google Chrome’s element inspecting tool).

EDIT 2:

A close example to show my problem can be found here: http://jsfiddle.net/EyVRF/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    lack of .css and html unable me to answer you.
    About : Is there any way to remove this spacing? YES there is.

    try this :

    ol, li{list-style-position:outside;margin:0;padding:0}

    or

    ol, li{list-style-position:inside;margin:0;padding:0}

    Let me guess ? You didn’t reset your .css ?? (margin:0;padding:0)

    Ok, i can see what you want .. and sadly, you wont be able to achieve what you want this way becose the ‘padding in between the bullet and first character is ‘browser-specific’ and unmanagable through css.

    You will have to use another technique : background image.

    <ul>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ul>

ul, li {
    margin: 0;
    padding: 0;
}
li {
    font-size:16px;
    line-height:16px;
    list-style-type:none;
    background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
    padding-left:16px;
    border-bottom:1px solid blue;
}
li.node_end {
    background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}

    http://jsfiddle.net/2RtB7/1/

    Carry on

    PS, try to search a little more before asking for help –> CSS: Control space between bullet and <li>

    • 0