CODEWITHSUNDEEP
htmlcss
jakebird451
jakebird451

Reputation: 2348

UL list-style-image providing unneeded padding

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/

Upvotes: 1

Views: 5116

Answers (2)

Milche Patern
Milche Patern

Reputation: 20472

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>

Upvotes: 0

ipixel
ipixel

Reputation: 529

Garry Cairns might be onto something. I tested your code and borrowed a list style image from a website that was a good size and i see no padding that would be an issue, or at least not the type you're seeing.

http://jsfiddle.net/BYQQV/

list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');

You may also want to consider not having to create a whole new class for the last list item. Try instead

li:last-child { list-style-image:.... }

Althouth IE is not happy with that. But for future reference.

Upvotes: 1

Related Questions