?
Solved

Bullet styles not changing

Posted on 2016-09-27
12
Medium Priority
?
30 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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

Independent Software Vendors: 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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

762 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