HTML unordered list bullets and floating div's inside li on Webkit

Question

I have a simple unordered list with list-style-type: disc and with some li's that have each two floated div's. The problem is that only on Webkit browsers (Safari, Chrome...) the bullets appear to the right side of the list.

See attached screenshot and this fiddle

Here is the code:

<ul>
    <li class="cf">
        <span class="left">Text1:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text2:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text3:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text4:</span>
        <span class="left">00,00 &euro;</span>
    </li>
</ul>

Can't tell you anything without seeing CSS of classes `cf` and `left` — David Jashi, Jun 10 '13 at 07:31
cf is just the clearfix, it isn't added in the jsfiddle so even removing that class the bug is still there. (the class is from the original code, i forgot to remove it). — Tudor Ravoiu, Jun 10 '13 at 07:33
If you change `float:left` to `display:inline-block` it works properly, but I don't know if you are avoiding this property with reasons... hope this helps any case ;) — Arkana, Jun 10 '13 at 07:41
@Arkana Thank you! Using display inline-block helps a lot. The problem is that IE7-IE8 doesn't support inline-block, but i think i will use a css hack for this. How can I mark up your comment as "right answer"? — Tudor Ravoiu, Jun 10 '13 at 07:50

score 3 · Accepted Answer · answered Jun 10 '13 at 07:50

3

As I say in the comments you could try with: display:inline-block;

Here's a working Fiddle.

If you want IE7 support, add in you only-IE7 css display:inline. That makes IE7 understand the inline-block.

If you are using only one css you could try: *:first-child + html ul li {display:inline;} /* only for IE7 */

IE8 supports inline-block properly ;)

answered Jun 10 '13 at 07:50

Arkana

2,831
20
35

ok, we posted on the same time (my reply to you last comment and your answer). thanx again – Tudor Ravoiu Jun 10 '13 at 07:51
Instead of a star hack or something try using the sample code for IE7, it pass the validator :) – Arkana Jun 10 '13 at 07:55

score 1 · Answer 2 · answered Jun 10 '13 at 07:39

1

If I'm understanding, you want the float on the ul li, not the ul li .left, and then adding float: left so that each item appears on a different line. Otherwise it causes the content of each li to float to the left past the bullet.

Updated jsfiddle with the float move to ul li: http://jsfiddle.net/JjrU3/3/

answered Jun 10 '13 at 07:39

Michael Peterson

1,123
6
14

Thank you for your answer. This is not what I try to obtain. The two span's inside each li should be floated, because they need to be all aligned, the text one under the other and the price one under the other. Also the list should have bullets. If you open the fiddle in Firefox you can see that the behavior is OK, but the problem appears only on Webkit browsers. – Tudor Ravoiu Jun 10 '13 at 07:43

score 0 · Answer 3 · answered Jun 10 '13 at 07:51

0

If your goal is to mimic columns, use a display: inline-block on your ul li.left instead of the float: left. You would have to be sure that the width of your li equals its highest content. Otherwise the columns will overlap

the fiddle

answered Jun 10 '13 at 07:51

Tum

21
3

score 0 · Answer 4 · answered Jun 10 '13 at 07:51

0

Two span floating there will be a bug，so you define the first span with float,the second span with display:inline-block. and you can use display for span:

ul li .leaf {display:inline-block}

answered Jun 10 '13 at 07:51

Airen

2,139
1
14
10

HTML unordered list bullets and floating div's inside li on Webkit

4 Answers4

Linked