Hey there!
The bullets actually appear to be getting added by the theme’s stylesheet. Here’s the snippet of code I’m seeing that’s doing that on your style.css file:
.home-bottom ul li,
.home-middle ul li,
.widget-area ul li {
list-style-type: square;
word-wrap: break-word;
}
So, that list-style-type: square; looks to be what’s doing it. Removing it should get rid of those!
-tk
Hi tk, thanks for your response.
I’d rather not have to remove the ability to use bullets anywhere else on the page.
I originally had checkboxes on the form. They appeared in a list with bullets. That’s why I added this code to my CSS:
.mc_list ul {
list-style-type: none;
}
.mc_list ul li {
list-style-type: none;
}
.field-group li {
list-style-type: none;
}
The code removed the bullets beside the checkboxes.
The bullets have reappeared now that I’m using radio buttons.
Using Firebug with Firefox, it shows mc_list is the class associated with the radio button list. mc_list is lower in the CSS than the code you quoted, so doesn’t that override it?
Ah, gotcha! Thanks for clarifying! The precedence of CSS code actually isn’t solely determined by order. It takes into account IDs, Classes, and HTML selectors as well. With this set order of precedence, it then assesses which CSS it should prioritize/honor over others. It’s actually a pretty cool “scoring” system. (Link here with explanation if you’re interested: http://www.techrepublic.com/article/css-101-handling-multiple-rules-for-the-same-element/6164216).
As far as the CSS code, you’re seeing that your “none” styles aren’t getting honored because of this precedence taking effect. To target just your MailChimp plugin’s sign up form, I’d recommend using the ID to target it, since IDs have precedence (think more points for each ID) over classes. So, you can try something like this:
#mc_signup li {
list-style-type: none;
}
Let me know if you have any questions!
-tk
tk, thanks so much for the 101.
And thanks for the code. It worked.
Glad to hear! Let us know if you have any questions.
