palak sharma palak sharma - 11 months ago 38
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

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('');

<div class="grid_16">


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>Zuckerberg took a computer graduate class at the nearby Mercy College while still in high school.</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."


Answer Source

Don't use list-style-image

See my changes in the updated fiddle -

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.