3

I'm struggling to figure out why the li values are pushed below the li number in Safari and Chrome. It looks normal in IE and FF (all in a straight line). Please view the following in each browser to see what i mean:

http://jsfiddle.net/CfyQF/

I have tried to replicate this using tables inside the li rather than floating divs, but get the same result.

Anyone know why this is happening and how i can update my css or html or both to resolve this issue?

Thanks!

3 Answers 3

1

I spent some time trying to come up with a working solution without the floats and came up with the following, for anyone who needs this here it is:

http://jsfiddle.net/zeaHu/11/

0

I had a problem like that before. It's the float that causes this.

You could get rid of the float property and work with margins and padding instead.

1
  • I'm not quite sure how to achieve this without the float. The li with the input would be pretty straight forward i imagine. but it's that little "X" that i'd like to stick to the right of the input - that's why i have the "float:left;" everywhere.
    – Mike Mike
    May 4, 2012 at 15:21
0

not sure if it solves your particular problem, but if you strip out all the css and most of the div's, the numbers line up beside the inputs and the 'X' still sits nicely to the right of the input;

<div>
    <ol>
        <li>
            <input>
            <button>x</button>
        </li>
        <li>
            <input>
            <button>x</button>
        </li>
    </ol>
</div>
1
  • Similar to @domvoyt. If I resize the window, at a certain point the 'X' drops down again, i'd like it to stick to the right of the input even as the window is resized.
    – Mike Mike
    May 5, 2012 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.