UL list style not applying

Question

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.

This shouldn't make a difference, but have you tried applying !important to the style? — Chris Van Opstal, Jan 28 '09 at 02:07
I think you need to show the content of your #nav and the ul element. — Adeel Ansari, Jan 28 '09 at 02:08

score 183 · Answer 1 · edited Nov 02 '15 at 16:07

183

You need to include the following in your css:

li { display: list-item; }

This triggers Firefox to show the disc.

edited Nov 02 '15 at 16:07

indubitablee

8,136
2
25
49

answered May 13 '09 at 07:12

3

This worked for me. if I use `li { display:block;}` I get no disc. – Cheeso Jun 12 '12 at 00:50
1

Holy cripes, this really is a display property? Can't believe **this** was what broke my CSS, hahaha. – AlbertEngelB Apr 24 '14 at 21:30
1

You deserve a ton of upvotes. Thanks for saving me an hour of head-scratching. – Ryan Griggs Feb 19 '17 at 05:06
1

Woah. Didn't even think the issue would be display property. You are a lifesaver. – Hilario Goes Mar 17 '18 at 12:14
not sure when changes happened that required the element to be display:list-item (default for
) 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 '23 at 18:37

score 47 · Answer 2 · answered Aug 09 '10 at 20:54

47

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

answered Aug 09 '10 at 20:54

user415535

471
4
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! – Asef Hossini Sep 27 '21 at 20:49

score 28 · Accepted Answer · answered Jan 28 '09 at 02:29

28

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

ul li {list-style-type: disc;}

answered Jan 28 '09 at 02:29

steve_c

6,235
4
32
42

41

You are mistaken. It is to be applied to the ul. http://www.w3.org/TR/CSS21/generate.html#list-style – assplecake Jan 28 '09 at 02:55
1

However, it looks like browsers will allow you to do this – dragonmantank Jan 28 '09 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: https://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 04 '13 at 00:27
@ steve_c Thanks for sharing this! – HenryDev Apr 15 '16 at 20:48
2

Adding `display: list-item;` solved my problem. – lovelyramos Jun 22 '21 at 04:59

score 23 · Answer 4 · answered Nov 20 '12 at 20:57

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

answered Nov 20 '12 at 20:57

AJ Zane

3,941
1
21
18

2

Having a reset rule of `padding: 0` is what was causing my issue with list styles not showing up – Chunky Chunk May 27 '19 at 15:16

score 17 · Answer 5 · edited May 27 '16 at 09:36

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.

edited May 27 '16 at 09:36

Topr

872
3
21
34

answered May 15 '12 at 19:30

tiberdoo

201
2
3

score 16 · Answer 6 · edited Nov 30 '11 at 17:09

16

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

edited Nov 30 '11 at 17:09

CoolBeans

20,654
10
86
101

answered Feb 01 '11 at 08:40

PipoPepino

161
1
3

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 '18 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 '18 at 17:03

score 8 · Answer 7 · edited Aug 23 '17 at 19:39

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

edited Aug 23 '17 at 19:39

Catalyst

1,018
2
12
19

answered Aug 23 '17 at 18:35

nara_l

664
2
9
23

That's what I'm looking for. You can also change the margin on the ul to padding instead. – StefanBob Jan 11 '18 at 22:40

score 5 · Answer 8 · edited Jan 26 '23 at 09:56

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)

edited Jan 26 '23 at 09:56

Sivert

5
4

answered Apr 25 '12 at 10:56

alimac83

2,346
6
34
50

score 1 · Answer 9 · answered Jul 12 '13 at 11:11

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

score 1 · Answer 10 · edited Jun 20 '20 at 09:12

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.

score 1 · Answer 11 · answered Jan 28 '09 at 02:26

1

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

You are including the reset styles first, right?

answered Jan 28 '09 at 02:26

dylanfm

6,292
5
28
29

score 0 · Answer 12 · answered Jan 28 '09 at 12:46

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.

answered Jan 28 '09 at 12:46

dragonmantank

15,243
20
84
92

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 '09 at 15:15

Jason · Answer 13 · 2021-02-20T16:31:12.160

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.

edited Feb 20 '21 at 16:31

answered Mar 08 '19 at 03:35

Jason

813
11
13

score 0 · Answer 14 · answered Oct 30 '20 at 10:27

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.

answered Oct 30 '20 at 10:27

Royson J Lewis

31
5

score 0 · Answer 15 · edited Feb 01 '21 at 16:29

0

please use inline css

<li style="disply:list-item">my li content </li>

edited Feb 01 '21 at 16:29

General Grievance

4,555
31
31
45

answered Feb 01 '21 at 15:57

Noor Ali

79
1
2

1

Why use inline over the other options already presented? – General Grievance Feb 01 '21 at 16:31
There's no reason to do this inline over other options. – Sauce Oct 11 '22 at 20:34

score 0 · Answer 16 · answered Feb 08 '23 at 11:50

0

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

li::marker {
    content : unset;
}

answered Feb 08 '23 at 11:50

ezmilhouse

8,933
7
29
38

UL list style not applying

16 Answers16

Update

Linked

Related