Member Avatar for assaf

I would like to use in a specific place a specific bullet style with a specific color.
Currently I'm using:

<SPAN style="COLOR: #DD440F;FONT-FAMILY: Wingdings;mso-fareast-font-family: Wingdings;mso-bidi-font-family: Wingdings">v</SPAN>fdsfdsfds<br>

You can see it in my website under "Main Menu" (on the left side of the page).
But I would like to use it as a bullet, like in this example:

<UL TYPE="square">
 
<LI><A HREF="Business_Plan.htm">Business Plan</A> <BR><BR>
<LI><A HREF="Financing_Resources.htm">Finance 
<LI><A HREF="Networking.htm">Business Connections (Networking)</A> <BR><BR>
<LI><A HREF="Time_Management.htm">Effective Time Management</A> <BR><BR><BR><BR>
</UL><BR>

What should I put instead of "squre"?
Do I have to add anything in style.css file? If yes what?

Thanks,
Assaf

  • 3 Contributors
  • 5 Replies
  • 237 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by austinluthers

Dani AI

Generated

Short answer: stop using the deprecated HTML TYPE attribute and style the list with CSS. ’s Wingdings trick will look OK on some machines but is unreliable for other users; was right that images are one route, and ’s note about built-in types (circle/square/disc) only changes the browser’s default markers. See the HTML spec / MDN for the deprecation note. (developer.mozilla.org)

A few practical options (ordered by modern best practice):

  1. Modern CSS marker (cleanest, keeps semantic UL/LI)

    ul.menu { margin:0; padding-left:1.4em; }
ul.menu li::marker {
color: #DD440F;
content: "\2713 ";   /* Unicode escape for a check mark */
font-family: "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
font-size: 1.1em;
}

    This uses the ::marker pseudo-element; support is good in modern browsers but check compatibility if old browsers must be supported. (developer.mozilla.org)

  2. Fallback for older UAs: hide default marker and use ::before

    ul.menu { list-style:none; margin:0; padding-left:1.4em; }
ul.menu li { position:relative; }
ul.menu li::before {
content: "\2713";
position:absolute;
left:0;
color:#DD440F;
font-family:"Segoe UI Symbol",sans-serif;
}

    This reliably works in very old browsers because it just injects content before each LI.

  3. Image / SVG bullets (pixel-perfect)

    ul.menu { list-style-image: url("bullet.svg"); /* or use inline SVG data URI */ }

    Use SVG for scale and crisp color control; list-style-image is the simplest image-based approach. (developer.mozilla.org)

Accessibility & reliability notes: keep the UL/LI markup so assistive tech still sees a list. Don’t rely on Wingdings being present (it’s a Microsoft dingbat font and not guaranteed everywhere); prefer Unicode glyphs or a webfont/@font-face if a specific symbol is required. If the marker is purely decorative, hide duplicate visual-only content from AT with appropriate techniques (aria-hidden on decorative elements or using CSS-only pseudo-elements which are typically ignored by assistive tech). (en.wikipedia.org)

Pick the method that matches browser support and maintenance needs: ::marker when you want fewer hacks and modern styling, ::before when you need broad legacy support, or SVG images when you need an exact decorative graphic.

Recommended Answers

All 5 Replies

Member Avatar for tgreer

Those bullets appear as small red letter "v" on your page in Firefox.

With HTML 3.2, which you appear to be using, you have only 3 bullet types, and the browser will render each as it sees fit. See this reference.

CSS has nothing to do with that, though you can use CSS and a background image to simulate custom bullets. A web search for "CSS bullets" should show you plenty on the topic.

Member Avatar for assaf

Thanks

I'm using HTML 4.0 , Are there any more options beyond "disc","squere" and "circle" in this version?

Member Avatar for tgreer

No. Again, those bullet styles are part of the spec, and will be rendered according to how each browser sees fit. If you want custom bullets, use images. Even in 4.0, the "TYPE" attribute is deprecated.

The new way is to use images, as I've mentioned. This is a good article on "taming lists" with CSS.

Member Avatar for assaf

Thanks again for the help and for your paitient;)

Member Avatar for austinluthers

I have also seen the code described on this post which is really nice and very useful for so many peoples.As per the CSS bullet style concern you can also use the "circle" instead of "square". According to me you can easily add in style.css such as background color and also add the background images.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.