I'm having a problem with bullet points appearing alongside images on this site: http://docomomo-uk.co.uk/
I've tried using this code based on other posts with similar issues:
div#featured-widget-post ul {
list-style-type: none !important;
}
but no luck. Any suggestions? All help much appreciated.
You don't have the list surrounded by ul tags and you're referencing the element incorrectly with something that isn't there. Wrap your li item with ul
after you wrap your elements correctly, reference it as such...:
.featured-widget-post ul li {
list-style-type: none;
}
Check with
.featured-widget-post li{
list-style-type: none !important;
}
You use id selector instead of class selector.
You don't have ul tags.
Try this:
.featured-widget-post li {
list-style: none;
}
Your code wasn't working because .featured-widget-post is a class (always preceded by a dot (.)) and not an id (preceded by a pound symbol (#)) - and your li tags are not wrapped in a ul.
Apply this css inside your page.
li {
list-style-type: none; docomomo-uk.co.uk #3(line 159)
}
Related
Please, don't confuse this question with others published on stackoverflow.
NOTE: Hide list with one element with pure CSS my question involves the parent tag.
I have these css rule:
ul {
padding: 5px;
}
ul > li:only-child {
display: none;
}
This rule hides the first ul tag when its only one.
But the space of the ul tag is still there.
How I can hide both ul and li when its onliy one li declared in my html?
The extra spacing you see even after hiding the li elements is because you have included a padding for the parent ul element.
So the solution is to remove the padding from the ul element and apply it on the child li elements.
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.
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.
You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags
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.
I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
I'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget
.c-w1 ol li :not(.k-widget) { list-style: decimal outside; }
However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.
<div class="k-widget">
<Lots of Things>
<li> ....
Should be something like that:
div:not(.k-widget) .c-w1 ol li {
list-style: decimal outside;
}
Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes.
Also have a look at caniuse for browser support of css3 selectors.
Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit;. So you can override it without using a specific value and adding redundance to your styles:
div .c-w1 ol li {
list-style: decimal outside;
}
div.k-widget .c-w1 ol li {
list-style: inherit;
}
Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li.
The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html, all li elements will match.
I would recommend constructing two styles, one overriding the other.
.c-w1 ol li { list-style: decimal outside; }
And
.c-w1 .k-widget ol li { override style here }
I would like to be able to set the property list-style-type: none; on all li elements that contain a major header (<h1>, <h2> and <h3>).
At first I tried this -
li h1,
li h2,
li h3 {
list-style-type: none;
}
But then I realised it wouldn't work, because it is setting the property on the headers, not the list elements.
How can I do this?
You can assign a class to li items which contains header elements and set list-style to none.
For Example:
li.header {list-style:none;}
Try the following:
CSS:
li {
list-style-type: none;
}
HTML:
<ul>
<li><h1>test1</h1></li>
<li><h1>Test2</h1></li>
</ul>