Bullet styles not changing

In my web page at  http://www.sonoma.edu/exed/ssali/, I have declared the bullet types for the inner set of bullets, i.e., just under the line "University Pathway options" to circle, but it is still showing up as disc. I entered the new lines in the base.css file on line 211.

Not sure why it isn't changing. Would appreciate any help.
geeta_m9Asked:
Who is Participating?
 
Russ SuterConnect With a Mentor Commented:
Or, as a more general option you could add this:
div#content ul ul li
{
    list-style-type: circle;
}

Open in new window

This will automatically set the bullet style of any 2nd level list inside <div id="content"> to use the circle bullet. The div reference was necessary to avoid adding bullets to the list items used in your menu.
0
 
Russ SuterCommented:
Using StyleBot I injected this CSS into your page:
ul > ul > li
{
    list-style-type: circle;
}

Open in new window

It worked fine.

Line 211 of your CSS (at least as I downloaded it) shows
ul.circle {list-style-type: circle;}

Open in new window

which would indicate that you're trying to assign the attribute to a <ul class="circle"> element. The list-style-type attribute is for <li> elements so you need to do 2 things:

1. Update your <ul> tag to include class="circle" in the attribute list
2. Alter your CSS on line 211 as follows:
ul.circle li {list-style-type: circle;}

Open in new window

0
 
geeta_m9Author Commented:
I tried your suggestion, but I don't see any difference. Maybe I did something wrong?
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Russ SuterCommented:
I gave you multiple suggestions. Which one did you try and is it live on your site now? Where should I look to see the change?
0
 
geeta_m9Author Commented:
0
 
Russ SuterCommented:
Neither the markup nor the CSS look any different now than before. Where exactly did you make a change?
0
 
geeta_m9Author Commented:
On line 211 of the base.css file, I inserted this line:

ul.circle li {list-style-type: circle;}

And in the HTML file,  on line 113, I inserted the class here:

<ul class="circle">
0
 
geeta_m9Author Commented:
Never mind! It works now after I tried the second method for the css file.
0
 
geeta_m9Author Commented:
It worked after I replaced the old code with this.

div#content ul ul li
{
    list-style-type: circle;
}
0
 
geeta_m9Author Commented:
Thank you!
0
 
Russ SuterCommented:
The first method was being overridden by the entry on line 113 of your CSS:
#content ul ul,#content-nonav ul ul{padding:4px 0 0 35px}

Open in new window

This is because in CSS a declaration for an ID will supersede a class declaration. You could alter line 211 like this:
ul.circle li {list-style-type: circle !important;}

Open in new window

which will force it to use that style regardless of what is above it in the CSS
0
 
geeta_m9Author Commented:
Ok - that's why the other method wasn't working.

Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.