CODEWITHSUNDEEP
htmlcss
palak sharma
palak sharma

Reputation: 231

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/

Upvotes: 0

Views: 55

Answers (2)

uttejh
uttejh

Reputation: 184

try this:`

    <li>
  <div class="img>

  </div>
  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>
     <div class="img>

     </div>
     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>

`

changes in css:` 

         li
         {

                  line-height:30px;
                  font-family:Roboto;
                  font-size:25px;
                  list-style:none;

          } 
      div
      {

          background: url("https://s3.postimg.org/4qsqurmsj/ic_item_play.png") no-repeat 0px 0px;
      }`

Upvotes: 0

Mick Sherry
Mick Sherry

Reputation: 146

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.

Upvotes: 2

Related Questions