I have an imported set of CSS styles. One of those styles is the list-style-type: none; that you can see in the screen-shot.
I'm implementing a component right now where I need numbered list items for an <ol>. No big deal, I just write a CSS style that's more specific than the imported style, right?
Except for some reason, even though the imported style is overridden, it's still effecting the list when I load the page! Once I disable it in dev-tools, the numbers appear just how I want them, but dev-tools shows that the imported style is crossed out and shouldn't have any effect in the first place.
How is it, that a CSS style that's clearly being overridden is still somehow effecting the element it's targeting?
Any ideas or insights would be very much appreciated. Thanks!
The style which sets list-style-type: none is applied to ol elements and li elements.
You are overriding it with a more specific selector for the ol element, but the li element has its defaults overridden so doesn't inherit from the parent ol.
This example shows how that works:
ul,
li {
list-style-type: none;
}
ul {
list-style-type: number;
}
.b {
list-style-type: inherit;
}
<ul class=list>
<li>aaa
<li class="b">bbb
</ul>
I cannot figure out how to implement a bullet list in the menu on this page. So far I have attempted these CSS rules for <ul> elements:
list-style-type: disc !important;
list-style: disc !important;
list-style-position:inside !important;
list-style-image: url("http://ils.unc.edu/~ferrerih/web-dev-project/li-red-bullet-smaller.png") !important;
When I inspect the relevant elements in the browser (Chrome) I get no indication that any of these rules are being overridden by anything; none of them are faded or crossed out. They simply do not have any visible effects. The page uses Bootstrap; I am not sure if this has anything to do with it.
For whatever reason, the ul element with class .dropdown-menu has a number of CSS styles that mean your entire menu cannot be seen.
Here are the offending styles that should each be removed entirely from your CSS file or updated to be some other value:
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
}
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
Using a GWT web app, Firebug says that the following HTML
<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>
is using this CSS.
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
What CSS do I need to write so that this <table> will have style, display: none?
I made 2 attempts: [EDIT - updated .multi-zone and display:none]
.drop-zone .drop-zone-column-66 .multi-zone {
display: none;
}
and
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: none;
}
but Firebug still gives me the CSS shown at the top.
Please advise me.
Strictly speaking, all you should need is:
.maximized-gadget .drop-zone.multi-zone {
display: none;
}
provided that that rule comes after the original rule you gave above:
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.
The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:
.drop-zone.drop-zone-column-66.multi-zone {
display: none;
}
which should set you right (though if I remember correctly this won't work in older versions of IE).
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.