I have css like this:
.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}
And html like this:
<ul>
<li class="done">Done</li>
<li class="notdone">Not Done</li>
</ul>
Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.
Is there a proper or standards-based way of doing what I am trying to do, or is this it?
EDIT: http://www.w3.org/TR/CSS21/generate.html
It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.
I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag
<ul>
in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing
The CSS 2.1 standard gives examples where list-style is applied directly to an li.
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.
Followed by:
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */
So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.
Following up to your edit...
If you look at the default style sheet for CSS, you will see that li is defined as follows:
li { display: list-item }
In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.
I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:
li {list-style: none; padding-left: 15px;}
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}
The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.
I don't see a problem with what you are doing. What docs are you talking about?
In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.
Related
Encountering strange issue in Froala,
This is how my Froala, editor looks like when un-ordered list is selected, but it's not appearing in the text-input.
This is how DOM looks like at this moment, indication presence of ul item.
But when I remove the overflow, property from fr-wrapper class inside froala-editor, then I can see the list item dot as follows.
Here is the overflow, property, removing overflow property below is doing manipulation on internal css of froala, I don't want to this.
I don't know why froala is not behaving in intended manner,
Expected behaviour should be like this as soon as user selects, the ul list item, without even touching or manipulating any internal css prop. like overflow etc.
add below lines in your css file. this will render the list style type that you have applied to the list items while editing the content through froala editor.
ul li {
list-style-type: inherit;
}
ol li {
list-style-type: inherit;
}
I'm just learning html5 and css3 when I create a simple page with either an ordered list or an unordered list and apply css display: inline; or block; it removes the numbers or bullets does anyone know why?
This answer has been answered many times. Here's one of the best answer given by Martijn Pieters
However, you can use something like this and it'll workout.
ul.columns>li:before { content:'\ffed'; margin-right:10px; }
or
You can also use background image. However, I'd suggest the former method.
list style bullets works only for display: list-item applied elements. This property is applied by default to the li element, which you are overriding now by applying display: inline or block. Hence, the list style icons will be gone.
Because only list items have bullets/number points. It doesn't make sense for an inline box or a block box to have a bullet, because neither of those things is a list item.
List items are display: list-item; that's what gives them the bullets/number points.
Instead of give
display :inline;
You can apply
Float left to li and give padding to it
Eg.
ul li{
float:left;
padding:0 25px 0 0;
}
I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).
I am trying to organize a gallery using figures, but I keep getting this annoying dot or bullet next to them. Are there any solutions like "list-style-type:none" for figures?
Thanks
(had to post a link to picture because I'm not allowed yet)
I suspect that your images are contained in a list and you need to change the list style to none for the relevant list.
Do this
body ul {
list-style: none;
}
This would apply a none list style for all the lists under the Body element.
I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:
.Lower-Alpha {
list-style: lower-alpha;
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
}
The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).
Eg I am getting:
a. struckthrough content
but I need:
a. struckthrough content
Any suggestions welcome.
Cheers
easy as pie: list-style-position: inside;
http://jsfiddle.net/seler/NWbrR/
edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.
edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/
#Haem; You can apply :after property
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
check the fiddle for more may be that's help you
http://jsfiddle.net/sandeep/NWbrR/4/
the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.
This is default browser behaviour and you wont be able to strike through the number/letter provided by the list.
If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.
You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:
<style>
.Lower-Alpha
{
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
list-style: none;
}
</style>
<ul>
<li class="Lower-Alpha">a. Foo</li>
<li class="Lower-Alpha">b. Bar</li>
</ul>
This'll render as:
a. Foo
b. Bar
It can be done as follows:
Create a wrapper <div> around the <ul>.
Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)
Style the <li> elements back to your normal font settings.
The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.
Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use #seler's solution.
You can't style the list item. It might look better this way?