List-Style-Type:None Not Working! Get Rid of The Bullets

List Style Type None not working

The reason your CSS is not working is because the list-style-type property must be attached to a display: list-item element such as li or ul. (As @andrewli stated you're targeting the wrong element).

You can do this like so

.naviMenu > ul li { // notice how I have targeted the li element(s) rather than the whole parent container
    list-style-type: none; // also, there is no need for !important 
}

Just as a little side note

This line of markup:

<ul>
    <div id="homePage"><li>Home</li></div>
    <!-- e.t.c. !-->
</ul>

Contains incorrect syntax. It should be done like so:

<ul>
    <li><div id="homePage">Home</div></li>
    <!-- e.t.c. !-->
</ul>

Hope this helps! :-)

Unable to remove CSS bullets from list

This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:

Inline styles

Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.

Add an id attribute to the unordered list,

Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

ul#the-one {
  list-style-type: none;
}

Wrap all of your HTML in a div with the id attribute set.

This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:

<div id="wrapper">
  <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
  </ul>
  <p>Some text goes here</p>
</div>

div#wrapper ul {
  list-style-type: none;
}

div#wrapper p {
  text-align: center;
}

Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.

list-style-type:none not working! Get rid of the bullets?

It's coming from this line:

.contentarea ul li:before {
    color: #666666;
    content: "●";
    font-family: Arial,Helvetica,sans-serif;
    left: 0;
    line-height: 20px;
    padding-right: 0;
    position: absolute;
    top: 0;
}

:) Just edit that will fix it

Removing bullets from ul, list-style: none not working

EDIT: Per Temani Afif, I cleared my browser's cache, and lo and behold, no more bullets. Thanks for the help everyone!

Pretty sure the id is correct. I'm too new to post a picture but here's a imgur link to what the inspector shows on Chrome: https://i.stack.imgur.com/hDm1h.jpg.

The id is automatically generated by Wordpress, it's not something I'd ever use.

I went back and couldn't find anything in the stylesheet, but here it is for some more savvy eyes to look over.

I added in !important, no dice.

html {

}

body {

}

.container {
    background-color: crimson;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: floralwhite;
    padding: 10px;
    display: flex;
}

.mainTitle {
    flex: 1;
    background-color: antiquewhite;
    text-align: center;
    font-size: 3em;
}

.mainSection-container {
    background-color: dimgray;
    display: flex;
    flex-direction: column;
}

.contentRow-1 {
    background-color: darkcyan;
    display: flex;
    flex-direction: column;
}

.menuSidebar {
    flex: 1;
    background-color: #f4f2e5;
    padding: 10px;
    order: 2;
}

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

.todaysArticle {
    flex: 3;
    background-color: #f7f7f7;
    padding: 10px;
    order: 1;
}

.todaysArticle-text {

}

.todaysImage {

}

.dark-text-background {
    background-color: rgba(57, 57, 57, 0.56);
    padding-right: 2px;
    padding-left: 2px;
}

.sidebar-2 {
    flex: 1;
    background-color: #fff8e7;
    padding: 10px;
    order: 3;
}

@media (min-width: 900px) {
    .contentRow-1 {
        flex-direction: row;
    }
    .menuSidebar {
        order: 1;
    }
    .todaysArticle {
        order: 2;
    }
    .side-bar-2 {
        order: 3;
    }
}

.contentRow-2 {
    background-color: floralwhite;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.articleStub {
    background-color: #e6edf0;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.image {
    max-width: 100%;
}
.postSection {
    flex: 4;
    background-color: aqua;
    padding: 10px;
    order: 1;
}

.dummySpace {
    flex: 1;
    background-color: cadetblue;
    padding: 10px;
    order: 3;
}

.postImage {
    max-width: 100%;
}

@media (min-width: 900px) {
    .contentRow-1 {
        flex-direction: row;
    }
    .menuSidebar {
        order: 1;
    }
    .postSection {
        order: 2;
    }
    .dummySpace {
        order: 3;
    }
    .postImage {
        max-width: 600px;
    }
}

.authorSection {
    flex: 3;
    order: 1;
    padding: 10px;
    background-color: darkgoldenrod;
}

.authorImage {
    max-width: 100%;
}

@media (min-width: 900px) {
    .contentRow-1 {
        flex-direction: row;
    }
    .menuSidebar {
        order: 1;
    }
    .authorSection {
        order: 2;
    }
    .authorImage {
        max-width: 600px;
    }
}

Remove space of the bullet when list-style-type: none is used

Use list-style-position:inside

li.title {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul {
  list-style-position: inside
}

<ul>
  <li class="title">Title</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

list-style-type:none & list-style:none not working

Your selector doesn’t match anything – #work ul would select any UL elements inside the element that has the id work.

If you want to select the HTML element <ul id="work">, then use ul#work, or just #work (when ids are involved, it is in most cases not necessary to be any more specific.)

---

Edit:

So, after you’ve shown the link to your page, it becomes clear that your issue is not with list-style at all – that works fine, your LI do not have a list style.

But what they do have, is a pseudo element – and that is what creates the small dark-pink dot.

http://answersfornewactors.com/wp-content/themes/gardeniablog/style.css, line #2483:

.post_content ul > li:before {
    font-family: "fontello";
    content: '\e8e4';
    font-size: 0.5em;
    display: inline-block;
    vertical-align: middle;
    text-indent: -2em;
}

list-type-style: none does not remove bullet points

not navn, but nav ul!

nav ul {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

I need an unordered list without any bullets

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.

---

Related Topics