61

I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.

After calling YUI, I call the stylesheet for the website and in there have a block for UL:

ul {list-style-type: disc;}

I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.

The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.

I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.

2
  • This shouldn't make a difference, but have you tried applying !important to the style? Jan 28, 2009 at 2:07
  • I think you need to show the content of your #nav and the ul element. Jan 28, 2009 at 2:08

16 Answers 16

186

You need to include the following in your css:

li { display: list-item; }

This triggers Firefox to show the disc.

5
  • 3
    This worked for me. if I use li { display:block;} I get no disc.
    – Cheeso
    Jun 12, 2012 at 0:50
  • 1
    Holy cripes, this really is a display property? Can't believe this was what broke my CSS, hahaha. Apr 24, 2014 at 21:30
  • 1
    You deserve a ton of upvotes. Thanks for saving me an hour of head-scratching. Feb 19, 2017 at 5:06
  • 1
    Woah. Didn't even think the issue would be display property. You are a lifesaver. Mar 17, 2018 at 12:14
  • not sure when changes happened that required the element to be display:list-item (default for <li>) to show the bullet... it does go back to at least 2014, but i didn't do any deep research... but it has NOT always been that way...
    – aequalsb
    Mar 18, 2023 at 18:37
52

and you can also give a left-margin if the reset.css you are using make all margin null : that means :

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

Assuming you apply this css after the reset, it should work !

Matthieu Ricaud

1
  • 2
    In my case, just the margin-left itself, solved my problem( if you deal with rtl, you should apply it to right, obviously ). Thanks! Sep 27, 2021 at 20:49
29

If I'm not mistaken, you should be applying this rule to the li, not the ul.

ul li {list-style-type: disc;}
5
  • 41
    You are mistaken. It is to be applied to the ul. w3.org/TR/CSS21/generate.html#list-style
    – assplecake
    Jan 28, 2009 at 2:55
  • 1
    However, it looks like browsers will allow you to do this Jan 28, 2009 at 12:45
  • 3
    The w3 link seems to now only say this applies to any element with a display-type set to 'list-style-item', MDN has some clarification on this that suggests with default stylesheets it is actually the LI that should have this rule: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type Perhaps not surprisingly I've found situations where applying it at the UL level worked in Chrome but not Firefox. Applying it at LI worked in both.
    – benz001
    Jun 4, 2013 at 0:27
  • @ steve_c Thanks for sharing this!
    – HenryDev
    Apr 15, 2016 at 20:48
  • 2
    Adding display: list-item; solved my problem. Jun 22, 2021 at 4:59
23

I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.

Margin messes with this too

1
  • 2
    Having a reset rule of padding: 0 is what was causing my issue with list styles not showing up May 27, 2019 at 15:16
17

This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.

16

Make sure the 'li' doesn't have overflow: hidden applied.

2
  • Thanks, this final tip was needed to make it work for me. I now have the rule: li { list-style: lower-alpha; overflow: visible; }
    – Panu Logic
    Dec 18, 2018 at 16:45
  • But I have to say I am puzzled as to WHY OVERFLOW should have anything to do with whether to display a bullet or not, displaying the bullet should be the default, but having to change the overflow properties to make it visible seems rather involved
    – Panu Logic
    Dec 18, 2018 at 17:03
8

My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:

li {
    list-style: disc outside none;
    margin-left: 1em;
}

ul {
    margin: 1em;
}
1
  • That's what I'm looking for. You can also change the margin on the ul to padding instead.
    – StefanBob
    Jan 11, 2018 at 22:40
5

I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.

The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).

(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)

0
1

All I can think of is that something is over-riding this afterwards.

You are including the reset styles first, right?

1
  • Have you tried following the rule with !important?
  • Which stylesheet does FireBug show having last control over the element?
  • Is this live somewhere to be viewed by others?

Update

I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.

The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.

0
1

In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:

previous code: ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;} ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}

modified code: ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;} ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }

1

Some reset.css set the ::marker to content : "", try to unset that on the <li> element:

li::marker {
    content : unset;
}
1
0

Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.

1
  • which is why I find stripping it from 'ul li' or 'li' in the first place to be very unnecessary - especially from a framework or reset. Setting 'list-style' strictly at the OL/UL level has worked well for me
    – Andy Ford
    Jan 28, 2009 at 15:15
0

Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.

0

please use inline css

<li style="disply:list-item">my li content </li>
2
  • 1
    Why use inline over the other options already presented? Feb 1, 2021 at 16:31
  • There's no reason to do this inline over other options.
    – Sauce
    Oct 11, 2022 at 20:34
0

All you have to do is add this class to your css.

.ul-no-style { list-style: none; padding: 0; margin: 0; }

Including the padding and margin set at 0.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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