CODEWITHSUNDEEP
htmlcsshtml-lists
richey
richey

Reputation: 3958

CSS: can't get rid of the <li> bullet

I have defined a CSS for my basic document layout:

div#content li {
    font-size:95%;
    list-style-image:url(/css/bullet_list.gif);
    line-height:1.5;
}

deeper down in one document, I'm including a CSS file defining

.codexworld_rating_widget li{
    list-style: none;
    list-style-image: none;
    float: left;
}

but the list element still displays the bullet graphic (bullet_list.gif) as if it would override the list-style-image: none; definition. Does anyone know why?

URL of the HTML document in question: http://www.psychotherapiepraxis.at/artikel/trauma/traumatherapie.phtml , the code in question is at the "Bewertung" section close to the end - the rating stars are covered by the bullets.

Upvotes: 0

Views: 987

Answers (3)

Stewartside
Stewartside

Reputation: 20925

Try setting near enough the same elements as the original definition but include the selector.

div#content .codexworld_rating_widget li{
    list-style: none;
    list-style-image: none;
    float: left;
}

This should fix your problem.

Upvotes: 4

Brian Ray
Brian Ray

Reputation: 1492

CSS specificity gives div#content li a value of 102 while .codexworld_rating_widget li gets a value of 11. You need to either add a parent with an ID to .codexworld_rating_widget li or remove the id from div#content li. This specificity calculator can be very handy.

Upvotes: 3

markoffden
markoffden

Reputation: 1468

You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags

Upvotes: 3

Related Questions