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/