Solved

Bullet styles not changing

Posted on 2016-09-27
12
26 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 500 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

809 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