UL list style not applying

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

You need to include the following in your css:

li { display: list-item; }

This triggers Firefox to show the disc.

Solution 2 - Css

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

Solution 3 - Css

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

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

Solution 4 - Css

> 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

Solution 5 - Css

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

Solution 6 - Css

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

Solution 7 - Css

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

Solution 8 - Css

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.

Solution 9 - Css

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.

Solution 10 - Css

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

You are including the reset styles first, right?

Solution 11 - Css

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

Solution 12 - Css

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.

Solution 13 - Css

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.

Solution 14 - Css

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.

Solution 15 - Css

please use inline css

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

Content Type	Original Author	Original Content on Stackoverflow
Question	dragonmantank	View Question on Stackoverflow
Solution 1 - Css	Big Buddy	View Answer on Stackoverflow
Solution 2 - Css	user415535	View Answer on Stackoverflow
Solution 3 - Css	steve_c	View Answer on Stackoverflow
Solution 4 - Css	AJ Zane	View Answer on Stackoverflow
Solution 5 - Css	tiberdoo	View Answer on Stackoverflow
Solution 6 - Css	PipoPepino	View Answer on Stackoverflow
Solution 7 - Css	nara_l	View Answer on Stackoverflow
Solution 8 - Css	alimac83	View Answer on Stackoverflow
Solution 9 - Css	Sampson	View Answer on Stackoverflow
Solution 10 - Css	dylanfm	View Answer on Stackoverflow
Solution 11 - Css	Somashree Patra	View Answer on Stackoverflow
Solution 12 - Css	dragonmantank	View Answer on Stackoverflow
Solution 13 - Css	Jason	View Answer on Stackoverflow
Solution 14 - Css	Royson J Lewis	View Answer on Stackoverflow
Solution 15 - Css	Noor Ali	View Answer on Stackoverflow