Floating text inside ul with Chrome, IE7 and IE8

Question

I am having some problems with floating text inside unordered list (ul). The problem appears, because I want to float div element to the left, I need to do this, because after this div there is another div, that needs to be on the same line, so I use float left. Here is an example on jsFiddle . Now the problem is, that in FF 6.02, Opera 11.50 and IE9 it works OK, but in Chrome 14.0.835.202, IE7 and IE8 the circle that should appear in the front of the text appears almost at the end of the text in the background.

I have posted the example on jsFiddle, but will also post the code here:

HTML:

<ul>
<li>
    <div class="textLeft">Glavna knjiga</div>
</li>
</ul>

CSS:

.textLeft {
float: left;
position: relative;
left: 4px;
}

Now how do I fix this, so that I will appear the same in IE7 and Chrome?

Answer 1

If you don't have to use position relative, you can make both divs inline-block, and instead of left, use padding-left.

Here's an example: http://jsfiddle.net/bQthE/3/

Answer 2

The problem is that the div is floated, but the li itself is not. That makes it so that the list item's indicator, the circle, is positioned as if the div were not there. Is it possible to float the li , or possibly the entire ul ?

Answer 3

Why do you need to float the divs at all? Set your divs to display:inline-block and that will take care of it. One thing you have to keep in mind is that inline-block display creates a 4px margin to the right of divs, so if you have a fixed width list item (li) you have to take that into account.

i usually don't like floating elements if i can help it.