Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

unordered list bullet point disappeared

I am a bit confused.

I have a unordered list in my page. When I set padding to unordered list bullet points got disappeared. 

<ul>
                <li>About Me</li>
                <li>Best Poems</li>
                <li>Worst Poems</li>            
</ul>

 ul
{
               padding:15px;
}

4 Answers

Ivan Burda
Ivan Burda
10,897 Points
Ivan Burda
Ivan Burda
10,897 Points

Hi Karthikeyan,

I have tried your code and it works as intended - the bullet points are present. They are present when I set padding to the whole unordered list and as well when I set the padding to the list items. What browser do you use? What is the version of the browser? To hide the bullet points, you would need to write: `list-style-type: none;

As I cannot see it in your code, this should not be the issue.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

I use Google Chrome 36.0.1985.125 m. Bullet points got disappeared in Google Chrome 36 and Opera 22.0.1471.70 . But it does not in Mozilla Firefox and SeaMonkey. Here is the code: 

<!DOCTYPE html>
<html>
    <head>
         <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
         <style>
            header{
                text-align: center;
            }
           ul{
               padding:10px;
            }
         </style>  
    </head>
    <body>
        <header>
            <img src="img/KP.jpeg"/>
            <ul>
                <li>About Me</li>
                <li>Best Poems</li>
                <li>Worst Poems</li>            
            </ul>
        </header>    
    </body>
</html>

Many thanks!

Karthikeyan Palaniswamy

Ivan Burda
Ivan Burda
10,897 Points
Ivan Burda
Ivan Burda
10,897 Points

Thank you for providing more details, Karthikeyan. What is the behavior of the code if you get rid of the "normalize" stylesheet? Can you try it, please?

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

My two cents... Just force browsers to display the bullets by specifying your choice of list-style-type for all unordered lists. You can do that in a custom CSS file, or your header.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Karthikeyan,

I don't think the bullet is disappearing but rather it's just off the left edge of your viewport. If you increase the padding to somewhere between 15px and 20px then you should see it again in all browsers.

Both firefox and chrome have a default left padding on ul's of 40px. So when you set it to 10px you're overriding that and there simply isn't enough space for the bullet to show up.

Through my own testing in codepen it looks like the padding needs to be a minimum of 10px in firefox and 15px in chrome to see the bullets. Chrome places the bullets a little farther from the text than firefox does and so you need a little more padding.

By default, the list markers are placed outside the list item's content box. You can change that with list-style-position: inside;

Then you shouldn't have a problem with them disappearing because they're now inside the content box of the list items.

You should be able to make the padding 0 on the ul and the bullets should be lined up along the left edge of the viewport.

I hope this helps clear it up for you.