CODEWITHSUNDEEP
htmlcss
noctufaber
noctufaber

Reputation: 794

Unable to remove CSS bullets from list

I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!

    <ul style="list-style-type:none;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>

Upvotes: 12

Views: 36094

Answers (9)

bob
bob

Reputation: 11

check for the following line of code in your css:

.targeted-class-name>ul>li>a:before {
    content: "•";
}

That was the culprit in my case

Upvotes: 1

JMMaguigad
JMMaguigad

Reputation: 29

i think you could solve also your problem by wrapping text in your list-item with span then used something like this:

ul>li:nth-child(odd) > span:before {
    display:none;
}

ul>li:nth-child(even) > span:before {
    display:none;
}

Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.

Upvotes: -1

Catto
Catto

Reputation: 6409

Good question; it's odd how the bullets show in IE even with the list-style:none;

This is the code that removed the bullets:

/* media query only applies style to IE10 and IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* removes bullets in list items for IE11*/ 
    li {
        list-style-position: outside;
        overflow: hidden;
    }
}

Upvotes: 0

StackBuck
StackBuck

Reputation: 819

The Trick is very simple:

HTML get that:

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

Style get that:

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

But, the next two options will blow your mind:

li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.

We limit the width and force the li paragraph to move left!

See a Awesome example here: http://jsfiddle.net/467ovt69/

Upvotes: 0

Scott C Wilson
Scott C Wilson

Reputation: 20016

My situation is similar to the one described by @fankoil: my inherited css had 

main-divname ul li{
  background-image:url('some-image.png');
}

to get rid of this for a specific ul, I gave the ul an id

<ul id="foo">
...

and in the css, turned off background image for this particular ul

ul#foo li {
  background-image: none !important;
}

So to add some clarification to some previous answers:

  • list-style-type is on ul
  • background-image in on li

Upvotes: 1

fankoil
fankoil

Reputation: 141

I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:

.column ul li {
  background: url(../images/bullet.gif) no-repeat 20px 7px;
  ...
}

Hope it helps someone.

Upvotes: 6

Yisela
Yisela

Reputation: 6961

It's better if instead of having the style inline you call it using a class:

<ul class="noBullets">

.noBullets {
list-style-type:none !important;
}

If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).

EDIT:

Accordnig to your comment, the style comes from div#wrapper ul. Did you try:

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

Upvotes: 0

Richard Jones
Richard Jones

Reputation: 4810

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.

Upvotes: 22

steve_c
steve_c

Reputation: 6255

Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.

Upvotes: 3

Related Questions