Getting rid of bullet points from <ul>

Question

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?

Mare

Your current HTML/CSS works fine for me in FF (JSFiddle). Which browser are you using? See if list-style: none works instead. – Libretto

i tried this on all browsers and mac and windows OS. i am using html5 doctype... – Mare

Answer 1

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.

Tomfoolery

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

Actually there isn't one, I, um, just completely failed to see the id selector that you used. Oops...sorry! – Tomfoolery

where on that link can I find that it needs to be defined on the li? – Arium

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. – Tomfoolery

Answer 2

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!

Vexation

Answer 3

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:

Fluctuation

Answer 4

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.

Disparage

Answer 5

Try this instead, tested on Chrome/Safari

ul {
 list-style: none;
}

Belldas

Answer 6

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.

Interceptor

Answer 7

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

Hypopituitarism

Answer 8

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

Pogey

Answer 9

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.

Arium

Answer 10

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

Arjun

Answer 11

for inline style sheet try this code

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

Soften

Answer 12

In a chrome, you can use

ul {
 list-style: none;
}

Jeans

Answer 13

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

Frisch

Answer 14

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!

Sella