CODEWITHSUNDEEP
csssass
Monica
Monica

Reputation: 1534

Adding an image before the list element s not working

I have the following css using Sass, but for some reason I only get 1 image, don't even know for which element is adding this.

            ul {
                position: relative;

                li {
                    font: normal 18px/22px Arial, sans-serif;
                    list-style-type: none;

                }

                li:before {
                    background: url(img/sprite2.png") no-repeat scroll -372px -391px rgba(0, 0, 0, 0);
                    content: "";
                    height: 25px;
                    left: 0;
                    position: absolute;
                    top: 8px;
                    width: 20px;
                    list-style-type: none;
                }
            }

Upvotes: 1

Views: 182

Answers (2)

frikinside
frikinside

Reputation: 1244

Remove the "top" from the styles and you're fine. Here is a jsFiddle: http://jsfiddle.net/4L9je4tx/

ul 
{
    position: relative;
}
li 
{
    font: normal 18px/22px Arial, sans-serif;
    list-style-type: none;
}
li:before 
{
    background: url("img/sprite.png") no-repeat scroll -372px -391px rgba(0, 0, 0, 0);
    content: "";
    height: 25px;
    left: 0;
    position: absolute;
    width: 20px;
    list-style-type: none;
}

Upvotes: 1

dfsq
dfsq

Reputation: 193291

Since li:before are absolutely positioned, you need to make every li positioned relatively, so that corresponding :before was positioned relatively to its parent li. Otherwise all :before pseudo-elements are positioned relatively to ul, and of course they are all stacked on top of each other.

li {
    position: relative;
    font: normal 18px/22px Arial, sans-serif;
    list-style-type: none;
}

Upvotes: 1

Related Questions