StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUL list-style-image providing unneeded padding
primarykey
Id
14592604
data
AcceptedAnswerId
14593500
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-01-29T21:27:02.737
FavoriteCount
0
LastActivityDate
2013-01-30T01:12:23.013
LastEditDate
2013-01-29T23:52:06.173
LastEditorUserId
1279231
OwnerUserId
1279231
ParentId
0
PostTypeId
1
Score
1
ViewCount
3666
LastEditorDisplayName
text
Body
I have a list that resembles: <pre><code><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> </code></pre> 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: <pre><code>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'); } </code></pre> 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. <img src="https://i.stack.imgur.com/8wxWV.png" alt="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: <a href="http://jsfiddle.net/EyVRF/1/" rel="nofollow noreferrer">http://jsfiddle.net/EyVRF/1/</a>
Tags
<html><css>
Title
UL list-style-image providing unneeded padding
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USjakebird451
UserOwnerUserId
1. USjakebird451
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POUL list-style-image providing unneeded padding
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.