I'm having a problem using CSS's display:inline property with the list-style-image: property on <li> tags. Basically, I want to output the following:
* Link 1 * Link 2
where * represents an image.
I'm doing this with the following bit of HTML:
<ol class="widgets">
<li class="l1">Link 1</li>
<li class="l2">Link 2</li>
</ol>
which is styled with the following bit of CSS:
ol.widgets { list-style-type:none; }
ol.widgets li { display:inline;
margin-left:10px; }
ol.widgets li.l1 { list-style-image:url(image1.gif); }
ol.widgets li.l2 { list-style-image:url(image2.gif); }
The problem is that when the list items are displayed inline, the images associated with the list items do not appear. They do appear if I take out the display:inline property on the <li> tag.
Is there a way to make the images appear even when the list items are displayed inline, or is that just impossible?
If you look at the 'display' property in the CSS spec, you will see that 'list-item' is specifically a display type. When you set an item to "inline", you're replacing the default display type of list-item, and the marker is specifically a part of the list-item type.
The above answer suggests float, but I've tried that and it doesn't work (at least on Chrome). According to the spec, if you set your boxes to float left or right,"The 'display' is ignored, unless it has the value 'none'." I take this to mean that the default display type of 'list-item' is gone (taking the marker with it) as soon as you float the element.
Edit: Yeah, I guess I was wrong. See top entry. :)
You want style image and Nav with float to each other then use like this
ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
You want the list items to line up next to each other, but not really be inline elements. So float them instead:
ol.widgets li {
float: left;
margin-left: 10px;
}
I would suggest not to use list-style-image, as it behaves quite differently in different browsers, especially the image position
instead, you can use something like this
ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }
it works in all browsers and would give you the identical result in different browsers.
I had similar problem, i solve using css ":before".. the code looks likes this:
.widgets li:before{
content:"• ";
}
You want the list items to line up next to each other, but not really be inline elements. So float them instead:
ol.widgets li {
float: left;
margin-left: 10px;
}
If you look at the 'display' property in the CSS spec, you will see that 'list-item' is specifically a display type. When you set an item to "inline", you're replacing the default display type of list-item, and the marker is specifically a part of the list-item type.
The above answer suggests float, but I've tried that and it doesn't work (at least on Chrome). According to the spec, if you set your boxes to float left or right,"The 'display' is ignored, unless it has the value 'none'." I take this to mean that the default display type of 'list-item' is gone (taking the marker with it) as soon as you float the element.
Edit: Yeah, I guess I was wrong. See top entry. :)
I had similar problem, i solve using css ":before".. the code looks likes this:
.widgets li:before{
content:"• ";
}
You want style image and Nav with float to each other then use like this
ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
I would suggest not to use list-style-image, as it behaves quite differently in different browsers, especially the image position
instead, you can use something like this
ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }
it works in all browsers and would give you the identical result in different browsers.
If you look at the 'display' property in the CSS spec, you will see that 'list-item' is specifically a display type. When you set an item to "inline", you're replacing the default display type of list-item, and the marker is specifically a part of the list-item type.
The above answer suggests float, but I've tried that and it doesn't work (at least on Chrome). According to the spec, if you set your boxes to float left or right,"The 'display' is ignored, unless it has the value 'none'." I take this to mean that the default display type of 'list-item' is gone (taking the marker with it) as soon as you float the element.
Edit: Yeah, I guess I was wrong. See top entry. :)
You want the list items to line up next to each other, but not really be inline elements. So float them instead:
ol.widgets li {
float: left;
margin-left: 10px;
}
Source: Stackoverflow.com