-1

I made these two work standalone but I am not able to make them work together and i just can't figure out why.

I need to achieve 2 things on a page : - Have unordered list of items in 3 colums ( there are a lot of list items to be listed) - Have a tick box in front of every list item.

I managed to achieve the column view and I managed to achieve the icon in front of each list item. But i cannot make them work together.

I am testing on jsfiddle : http://jsfiddle.net/glee/Fa722/

Here's the HTML

 <div class="licol">    
 <ul id="ul.TickList">
 <li>apples</li>
 <li>pears</li>
 <li>bananas</li>
 <li>grapes</li>
 </ul></div>
 <div class="licol">    
 <ul>
 <li>cheese</li>
 <li>milk</li>
 <li>cookies</li>
 <li>oreos</li>
 </ul></div>
 <div class="licol">    
 <ul>
 <li>apricot</li>
 <li>cherries</li>
 <li>oranges</li>
 <li>pineapple</li>
 </ul></div>

And the CSS.

ul.TickList {
   list-style-image:url(http://simplyelegant.us.tempcloudsite.com/images/icons/small_icons/16px-bluecheck-icon.png);
      width: 700px;
    list-style-type:none;
}

.licol {
    float: left;
    width: 140px;
}

Thank you very much in advance!

1
  • your css call for ul.TickList should be #ul.TickList
    – Adjit
    Jun 20, 2014 at 17:00

1 Answer 1

-1

Your html should only be this:

<ul id="TickList">
<!-- Content -->
</ul>

Your css call should be:

#TickList li {
position: relative;
left: 20px;
list-style-type:circle;
list-style-image:url('http://simplyelegant.us.tempcloudsite.com/images/icons/small_icons/16px-bluecheck-icon.png');
}
4
  • That didn't work. Am I calling it correctly in HTML with <ul id="#ul.TickList"> ? Jun 20, 2014 at 17:14
  • I didn't even see that, look at the edit here in a few. Also, you should be pointing it toward the li elements.
    – jamadri
    Jun 20, 2014 at 17:15
  • Sorry, it didn't work either. Try it out over here please jsfiddle.net/glee/Fa722 Jun 20, 2014 at 17:22
  • I got the fiddle working. The code is above and edited. Also, here's the fiddle again: jsfiddle.net/glee/Fa722
    – jamadri
    Jun 20, 2014 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.