943,770 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Special Character Bullets
Ad:
Permalink
Dec 7th, 2006
0

Special Character Bullets

Expand Post »
Whats the best way to use a special character as a bullet for lists in CSS.

I'm trying to use "»"?
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vexhawk is offline Offline
24 posts
since Oct 2006
Permalink
Dec 7th, 2006
0

Re: Special Character Bullets

HTML and CSS Syntax (Toggle Plain Text)
  1. li{
  2.     content: "\00BB \0020";
  3. }

Won't work in IE though. If you want it to be cross-browser use an image instead.
Moderator
Reputation Points: 161
Solved Threads: 38
He's No Good To Me Dead
stymiee is offline Offline
1,422 posts
since May 2006
Permalink
Dec 7th, 2006
0

Re: Special Character Bullets

thanks. i tried doing that to an inline "li" didn't seem to work.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vexhawk is offline Offline
24 posts
since Oct 2006
Permalink
Dec 8th, 2006
0

Re: Special Character Bullets

Hmm, how would it work in inline tags?

I have this:

HTML and CSS Syntax (Toggle Plain Text)
  1. <li style="content: '\00BB \0020';">

it doesn't seem to work.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vexhawk is offline Offline
24 posts
since Oct 2006
Permalink
Apr 11th, 2008
0

Re: Special Character Bullets

an earlier post mentions that for IE to use an image...what would the syntax be for that?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
tracyselena is offline Offline
1 posts
since Apr 2008
Permalink
Apr 11th, 2008
0

Re: Special Character Bullets

Two methods I can think of.
You have the image property for Lists, and you have the background-image proprerty also.

HTML and CSS Syntax (Toggle Plain Text)
  1. li
  2. {
  3. list-style-image: url(yourimage.ext);
  4. }

Or

HTML and CSS Syntax (Toggle Plain Text)
  1. li
  2. {
  3. list-style: none;
  4. background-image : url(yourimage.ext);
  5. }

Note, with the background-image method, you may need to apply a bit of padding to the list.
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Oct 8th, 2010
0

try this

Click to Expand / Collapse  Quote originally posted by vexhawk ...
Hmm, how would it work in inline tags?

I have this:

HTML and CSS Syntax (Toggle Plain Text)
  1. <li style="content: '\00BB \0020';">

it doesn't seem to work.
Hi vexhawk, try this:
HTML and CSS Syntax (Toggle Plain Text)
  1. ul li:before { content: "\00BB \0020"; }

It works for me
Reputation Points: 10
Solved Threads: 0
Newbie Poster
KingRosales is offline Offline
1 posts
since Oct 2010
Permalink
Oct 9th, 2010
0
Re: Special Character Bullets
The pseudo selector can't support in IE 6 and older. Using the background image must be more flexible and comfortable. I never used the pseudo selector for styling the elements.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: scrolling news problem in chrome
Next Thread in HTML and CSS Forum Timeline: IE CSS incorrect after applying Safari fixes





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC