[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Bullet styles not changing

Posted on 2016-09-27
12
Medium Priority
?
33 Views
Last Modified: 2016-09-27
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.
0
Comment
Question by:geeta_m9
  • 7
  • 5
12 Comments
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41818824
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
 
LVL 20

Accepted Solution

by:
Russ Suter earned 2000 total points
ID: 41818832
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
 

Author Comment

by:geeta_m9
ID: 41818836
I tried your suggestion, but I don't see any difference. Maybe I did something wrong?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Expert Comment

by:Russ Suter
ID: 41818839
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
 

Author Comment

by:geeta_m9
ID: 41818840
0
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41818847
Neither the markup nor the CSS look any different now than before. Where exactly did you make a change?
0
 

Author Comment

by:geeta_m9
ID: 41818854
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
 

Author Comment

by:geeta_m9
ID: 41818861
Never mind! It works now after I tried the second method for the css file.
0
 

Author Comment

by:geeta_m9
ID: 41818864
It worked after I replaced the old code with this.

div#content ul ul li
{
    list-style-type: circle;
}
0
 

Author Closing Comment

by:geeta_m9
ID: 41818865
Thank you!
0
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41818866
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
 

Author Comment

by:geeta_m9
ID: 41818872
Ok - that's why the other method wasn't working.

Thank you.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question