Solved

CSS Bullet Points

Posted on 2014-01-03
7
367 Views
Last Modified: 2014-01-05
I want the code that has checkmark to have a checkmark for the bullet point.

.text-content ul .checkmark {list-style-image:url("../img/global/checkmark.png"); margin-left:25px;}

.text-content ul {list-style:square; margin-left:25px;}


<ul class="checkmark">
<li></li>
<li></li>
</ul>

<ul>
<li></li>
<li></li>
</ul>

Open in new window

0
Comment
Question by:Computer Guy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39755211
Remove the space
ul .checkmark
becomes
ul.checkmark

I presume .text-content is the class of a container, else remove it.
0
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39755214
Hi audiotech520, instead of using list-style-image, you could try using a background image

.text-content ul .checkmark {
  background: url("../img/global/checkmark.png") no-repeat 0 0;
  padding-left: 25px;
  list-style: none;
}

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39755240
@cathal

Did not work.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 39755243
Why post an answer to a question that wasn't asked and then repeat the same mistake that was made.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39755246
This is your code with the amendment (and a different image as I don't have yours)

http://jsfiddle.net/6Q34f/

I assume you have your css in style tags? i.e.

<style type="text/css">
.text-content ul .checkmark {list-style-image:url("../img/global/checkmark.png"); margin-left:25px;}

.text-content ul {list-style:square; margin-left:25px;}
</style>

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39755282
Worked!

Also do you know of any any scripts that allow real time code editing, but I can host on my own server? Like the jsfiddle.net
0
 
LVL 58

Expert Comment

by:Gary
ID: 39755289
Firebug for FF is the best you can get.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question