Css How To Remove Bullet Points

14 Answers 14

answered Nov 27 '11 at 23:03

David ThomasDavid Thomas

235k 49 gold badges 355 silver badges 390 bronze badges

What is the difference of doing ul#otis and #otis?

Nov 27 '11 at 23:05
Actually there isn't one, I, um, just completely failed to see the id selector that you used. Oops...sorry!

Nov 27 '11 at 23:06
where on that link can I find that it needs to be defined on the li?

Nov 27 '11 at 23:18
The first two sentences: "The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item" (although it does allow that it can apply to any element with a display property). Although they do define it, for their example, under the ol element. Personally I always default to defining it for both the list (ul/ol) and the li elements.

Nov 27 '11 at 23:23

I had the same extreme irritating problem myself since the script did not take any notice of my styelsheet. So I wrote:

              <ul style="list-style-type: none;">

That did not work. So, in addition, I wrote:

              <li style="list-style-type: none;">

Voila! it worked!

answered Jan 1 '13 at 16:23

John OlavJohn Olav

281 3 silver badges 2 bronze badges

The following code

                #menu li{   list-style-type: none; }

                <ul id="menu">     <li>Root node 1</li>     <li>Root node 2</li> </ul>

will produce this output:

output is

answered Oct 8 '14 at 10:04

KishanKishan

1,228 10 silver badges 20 bronze badges

To remove bullet points from unordered lists , you can use:

              list-style: none;

You can also use:

              list-style-type: none;

Either works but the first is a shorter way to get the same result.

answered Dec 13 '16 at 23:01

PhilpotPhilpot

176 3 silver badges 15 bronze badges

Try this instead, tested on Chrome/Safari

                ul {  list-style: none; }

answered Nov 27 '11 at 23:05

Paul KaplanPaul Kaplan

2,825 18 silver badges 25 bronze badges

To remove bullet from UL you can simply use list-style: none; or list-style-type: none; If still not works then i guess there is an issue of priority CSS. May be globally UL already defined. So best way add a class/ID to that particular UL and add your CSS there. Hope it will works.

answered Jan 8 '17 at 15:16

Rokan NashpRokan Nashp

191 2 silver badges 13 bronze badges

Put

              <style type="text/css">  ul#otis {      list-style-type: none;    } </style>

immediately before the list to test it out. Or

              <ul style="list-style-type: none;">

saji89

1,883 3 gold badges 25 silver badges 49 bronze badges

answered Nov 28 '11 at 3:02

StuffStuff

103 1 silver badge 12 bronze badges

This worked perfectly HTML

              <ul id="top-list">         <li><a href="#">Home</a></li>         <li><a href="#">Process</a></li>         <li><a href="#">Work</a></li>         <li><a href="#">Team</a></li>         <li><a href="#">Contact</a></li>       </ul>

CSS

              #top-list{   list-style-type: none;   list-style: none;}

Thomas Ayoub

27.6k 15 gold badges 91 silver badges 133 bronze badges

answered Jun 19 '18 at 15:16

There must be something else.

Because:

                              ul#otis {      list-style-type: none;    }

should just work.

Perhaps there is some CSS rule which overwrites it.

Use your DOM inspector to find out.

answered Nov 27 '11 at 23:18

PeeHaaPeeHaa

67.8k 54 gold badges 182 silver badges 256 bronze badges

I had the same problem, and the way I ended up fixing it was like this:

              ul, li{     list-style:none;     list-style-type:none; }

Maybe it's a little extreme, but when I did that, it worked for me.

Hope this helped

answered Jan 23 '13 at 20:52

Braden BestBraden Best

7,912 3 gold badges 29 silver badges 42 bronze badges

for inline style sheet try this code

              <ul style="list-style-type: none;">     <li>Try This</li>     </ul>

answered Oct 1 '14 at 14:11

LukeLuke

77 8 bronze badges

In a chrome, you can use

              ul {  list-style: none; }

answered Sep 26 '20 at 11:41

your code:

                ul#otis {     list-style-type: none; }

my suggestion:

                #otis {     list-style-type: none;  }

in css you need only use the #id not element#id. more helpful hints are provided here: w3schools

answered Feb 3 '16 at 2:12

I had an identical problem.

The solution was that the bullet was added via a background image, NOT via list-style-type. A quick 'background: none' and Bob's your uncle!

answered Jan 16 '14 at 12:20

RuskinRuskin

4,965 3 gold badges 39 silver badges 56 bronze badges

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