- This topic has 28 replies, 4 voices, and was last updated 6 years, 3 months ago by Leo.
-
AuthorPosts
-
May 17, 2017 at 6:41 pm #319505dale
Thought I’d style bullets on a new site using the following css:
/* bullet style */
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}li {
padding-left: 16px;
}li:before {
content: “§”; /* Insert content that looks like bullets */
padding-right: 10px;
color: #eb374b; /* Or a color you prefer */
}It worked great for the bullets, but also added “§” over every menu item in the top navigation.
Is there a workaround, or should I just stick with standard bullets?
May 17, 2017 at 8:59 pm #319537LeoStaffCustomer SupportHi Dale,
You could try this so the styles only apply to the content area:
.inside-article li:before { content: “§”; /* Insert content that looks like bullets */ padding-right: 10px; color: #eb374b; /* Or a color you prefer */ }
Let me know if this helps.
May 18, 2017 at 6:29 am #319916daleSo, apparently I hadn’t done the GP Premium update when I posted the question. Now that I have, the original code no longer works to replace bullets, only to erase them. Not sure why that would be.
May 18, 2017 at 9:32 am #320113LeoStaffCustomer SupportHmm the update shouldn’t have anything to do with those code.
Try clearing your browser cache or caching plugin if you are using it.
May 19, 2017 at 7:25 am #320692daleI don’t have any caching and clearing the browser cache didn’t help. When the site goes live, I’ll link if this is still an issue.
May 19, 2017 at 9:29 am #320787LeoStaffCustomer SupportSounds good. Let me know 🙂
May 22, 2017 at 7:34 pm #322603daleThe site’s now live and it’s still not working. I altered the code slightly to add .inside-article to all properties because, without it, the padding in the navigation bar got screwy — but the bullets were missing in either case.
Also, https://jigsaw.w3.org/css-validator/validator pulled up “Value Error : content Lexical error at line 279, column 17. Encountered: “?” (63), after : “” ????????;” for the “.inside-article li:before ” line
This is what my CSS looks like:
.inside-article ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}.inside-article li {
padding-left: 16px;
}.inside-article li:before {
content: “§”;
color: #eb374b;
padding-right: 10px;
}May 22, 2017 at 11:05 pm #322639LeoStaffCustomer SupportCan you provide a link to your site?
May 23, 2017 at 4:21 am #322764daleHere is a page with a bulleted list: http://www.Janellereston.com/lustily-ever-after
May 23, 2017 at 8:15 am #322893TomLead DeveloperLead DeveloperCan you make sure there’s no syntax errors in your CSS?: https://jigsaw.w3.org/css-validator/validator
May 23, 2017 at 10:11 am #322953daleI did. That’s the only error that keeps showing up.
May 23, 2017 at 4:48 pm #323144TomLead DeveloperLead DeveloperI’m seeing a couple errors when I validate it.
Can you remove all comments from the CSS?:
/* comments */
May 23, 2017 at 5:53 pm #323164daleHi Tom,
I removed all the comments and it didn’t make any difference on the website or in the validator. The validator gave me one notice about not implementing one of the webkit keyframes and two errors, both of which are contained in the bullet html:
119 Sorry, the at-rule @-webkit-keyframes is not implemented.
306 .inside-article li:before Value Error : content Lexical error at line 306, column 10. Encountered: “?” (63), after : “” ????????;
309 Value Error : content Parse Error [: 10px; color: #eb374b; } ]
I went ahead and deleted the CSS associated with line 119, but removing it didn’t help in terms of getting the bullet CSS to work. I validated again and got the same two errors:
299 .inside-article li:before Value Error : content Lexical error at line 299, column 10. Encountered: “?” (63), after : “” ????????;
302 Value Error : content Parse Error [: 10px; color: #eb374b; } ]This is the CSS (comments are not in the CSS on the site, only here for clarity):
.inside-article ul {
list-style: none;
padding: 0;
margin: 0;
}.inside-article li {
padding-left: 16px;
}.inside-article li:before { /*referred to as line 306/299 above */
content: “§”;
padding-right: 10px;
color: #eb374b; /* line 309/302 */
}May 23, 2017 at 5:58 pm #323168daleA-ha!
I just figured it out. My text editor reset the quotes to smart quotes. Criminy. Since I always set it to plain quotes, my only recourse is to blame the cat. She must have screwed up everything when she walked across my keyboard.
That or computer demons.
Thanks for your patience.
May 23, 2017 at 6:53 pm #323184TomLead DeveloperLead DeveloperGlad you got it working! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.