CSS won't remove bullet points

jrd9mm · October 29, 2013, 1:43pm

Hi,

I am really struggling to remove the bullet points on this website. I have tried all the obvious list-style-type: none !important but still can not find where it is coming from?!

Any help would be very much appreciated!

Here is the website: http://fortecmotorsports.com

PaulOB · October 29, 2013, 4:15pm

Hi,

The dot is placed there via this rule:


.content_area ul li:before {
    content: "&#9679;";
    font-family: Arial,Helvetica,sans-serif;
    padding-right: 7px;
}

Just remove it if you don’t want it or set it to display:none for the elements where you don’t want it.


.content_area ul li:before {
display:none;
}

jrd9mm · October 29, 2013, 4:59pm

Paul_O_B:

Hi,

The dot is placed there via this rule:
.content_area ul li:before {
    content: "&#9679;";
    font-family: Arial,Helvetica,sans-serif;
    padding-right: 7px;
}
Just remove it if you don’t want it or set it to display:none for the elements where you don’t want it.
.content_area ul li:before {
display:none;
}

Thank you! That worked perfectly!

ninjadev · November 2, 2013, 9:20pm

Just use “list-style” instead of “list-style-type” and use it on BOTH the ul the li elements.

PaulOB · November 3, 2013, 11:11am

Thanks for commenting but I need to make a couple of corrections:)

The bullet point wasn’t being applied via any list-style rules but was placed using generated content via the :after pseudo class. Therefore addressing the list-style would be of no use in this specific case.

There is no need to duplicate the rules on the ul and the li as applying it would be one or the other would be fine (depending on original specificity). The general recommended practice is to apply it the the ul or ol and the list will inherit as required.

list-style is just shorthand and list-style-type works fine if used properly but generally list-style is indeed a preferred method as it resets the other list properties to default also.