Custom List style not working

Question

I was trying to add a awesomefont list style to the <li> elements.

<ul>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
</ul>

and css

li{
    list-style:none;
}

But when we resize the window, the li text goes under the list style circle which is not acceptable. I think it should start after the list style circle even if the text goes in the second line.

Can anybody suggest me a better way to do it? Jsfiddle: http://jsfiddle.net/n6bf3/

@bjb568, if you go to the jsfiddle, you can see the list with the list style as a circle. Now if you resize the window such that the line goes into a second line, it goes right below the circle (list style). But there should be an indentation from it. If you look at the `related` section here in the stackoverflow page, just right to this comment, you can see the number section is a seperate part and the second line of text starts not below the number. This is what I want in my case. — user1012181, Mar 04 '14 at 04:04

score 3 · Accepted Answer · answered Mar 04 '14 at 05:51

The reason the list marker is not behaving like a list marker is because the marker you are using is not a real list marker, it is an element inside of the list element. The glyph and the text are in the same container so it wraps under it according to normal flow.

You could hack together ways to make it work as expected but just using a real marker would be much easier and lead to cleaner, more maintainable code.

<li>
<a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
</li>

Using the default circles:

li{
    list-style: circle;
}

http://jsfiddle.net/UselessCode/B842c/

If you have to have a custom image instead of one of the default markers you can do that with marker styling too:

li{
    list-style-image: url("circle-bullet.png")
}

http://jsfiddle.net/UselessCode/fPBrS/

If the op just wanted a way to have a list with a circle, I'd recommend following this. My answer is based on the understanding that the op wants to use a specific web font as his marker. fwiw, if clean html AND specific web fonts were key criteria, I'd personally use a :before css to add the list item content in css and not have it show in html either, so could use webfonts and still use this semantic markup — Mike, Mar 04 '14 at 06:35
And it looks like it's already been explained that way..http://stackoverflow.com/questions/12468359/using-font-awesome-icon-for-bullet-points-with-a-single-list-item-element — Mike, Mar 04 '14 at 06:36

score 1 · Answer 2 · answered Mar 04 '14 at 04:06

1

There's a few ways to do it. Basically, if you want the circle to show next to the anchor text even if the text has wrapped, you are essentially wanting the CSS to layout in rows.. so in that case, this is the simplest way:

li{
    list-style:none;
    display:table-row;
}

li *
{
    display:table-cell;
}

http://jsfiddle.net/mL34R/1/

However, table layout in css can be finicky, so here's another way that places the elements next to each other as inline blocks, but allows the anchor content to wrap normally:

li{
    list-style:none;
    white-space:nowrap;
}

li i
{
    display:inline-block;
    vertical-align:top;
}

li a
{
    display:inline-block;
    white-space:normal;
}

http://jsfiddle.net/pV4cp/

answered Mar 04 '14 at 04:06

Mike

350
1
5

inline-block has space problems. `i` and `a` have whitespace between them. – bjb568 Mar 04 '14 at 04:11
It depends if you see that as a problem. The table-row approach doesn't have this space, but imo, looks worse. You could add margin-right:-3px; to the li i style if you particularly cared about it. – Mike Mar 04 '14 at 04:21
For some ``, I use the dashed line as the text-decoration using the border-bottom. So if the text goes into another line, there will be only one line under the whole text. – user1012181 Mar 04 '14 at 04:26
1

That might be another question.. I don't think you are going to achieve a custom underline which wraps, at least, not in css. When the text goes to a second line, the containing block grows. – Mike Mar 04 '14 at 04:38
Ok, there IS a way, but it's still a bit unsupported: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style#Specifications – Mike Mar 04 '14 at 04:50

score 1 · Answer 3 · answered Mar 04 '14 at 04:07

1

http://jsfiddle.net/n6bf3/2/

i {
    position: absolute;
}
a {
    display: block;
    padding-left: 16px;
}

Positioning the i absolutely will get it out of a's way, so a can get it's padding-left (which only works properly if a is block).

answered Mar 04 '14 at 04:07

bjb568

11,089
11
50
71

Putting specific measurements (such as 16px) in style means the size of the font is now not respected. If a different circle font is used, this style must be manually adjusted. – Mike Mar 04 '14 at 04:16
If I don't have some tags in some lists, it wont work well. – user1012181 Mar 04 '14 at 04:21
@Mike You'll set a font-size anyway. If you want, you can use a preprocessor variable for it. – bjb568 Mar 04 '14 at 05:22
@user1012181 You could do give `li` a `min-height: 18px`. – bjb568 Mar 04 '14 at 05:22

Custom List style not working

3 Answers3