palak sharma palak sharma - 2 months ago 7
CSS Question

list-style-image is not appearing on the same level with list item?

I am using a image for list items but it is not displaying on the same level with the

li
item. I am adding a link to fiddle pls have a look.



#container {
background: #e3e3e3;
margin-top: 50px;
}

#image {
margin: 20px;
width: 900px;
}

#title {
text-align: center;
font-family: Roboto;
background: -webkit-linear-gradient(#f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

li {
line-height: 30px;
font-family: Roboto;
font-size: 25px;
list-style-image: url('https://s3.postimg.org/4qsqurmsj/ic_item_play.png');
}

<div class="grid_16">

<ul>

<li>
Mark Zuckerberg began programming at a young age--when he was 12 he created a messaging program that his father used in his dental office, allowing the receptionist to notify him of new patients without yelling across the office.
</li>
<li>Zuckerberg took a computer graduate class at the nearby Mercy College while still in high school.</li>
<li>
His parents even hired a computer tutor to work with the young Zuckerberg, but the tutor admitted that it quickly became difficult to stay ahead of his pupil, referring to him as a "prodigy."
</li>

</ul>
</div>





https://jsfiddle.net/n2o79mL7/

Answer

Don't use list-style-image

See my changes in the updated fiddle - https://jsfiddle.net/n2o79mL7/1/

I have basically removed the padding from the ul and added the image as a background of the li, using background-position and padding to align the list item properly.

Hope this helps mate.