[html] Getting rid of bullet points from <ul>

I have the following list:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

I want to get rid the bullets so i tried:

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

That didn't work though. What is the proper way to remove the bullets from the displayed list?

Assuming that didn't work, you might want to combine the id-based selector with the li in order to apply the css to the li elements:

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

Reference:

• list-style-type at the Mozilla Developer Center.

Try this instead, tested on Chrome/Safari

ul {
 list-style: none;
}

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;}

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.

In a chrome, you can use

ul {
 list-style: none;
}

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.

for inline style sheet try this code

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

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.

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;">

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

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!

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!

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.

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: