Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Bullet styles not changing

Posted on 2016-09-27
12
Medium Priority
?
31 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

636 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