Solved

Bullet styles not changing

Posted on 2016-09-27
12
21 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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
I tried your suggestion, but I don't see any difference. Maybe I did something wrong?
0
 
LVL 20

Expert Comment

by:Russ Suter
Comment Utility
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
Comment Utility
0
 
LVL 20

Expert Comment

by:Russ Suter
Comment Utility
Neither the markup nor the CSS look any different now than before. Where exactly did you make a change?
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:geeta_m9
Comment Utility
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
Comment Utility
Never mind! It works now after I tried the second method for the css file.
0
 

Author Comment

by:geeta_m9
Comment Utility
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
Comment Utility
Thank you!
0
 
LVL 20

Expert Comment

by:Russ Suter
Comment Utility
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
Comment Utility
Ok - that's why the other method wasn't working.

Thank you.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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 videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now