CODEWITHSUNDEEP
htmlcssgoogle-chromesafaripositioning
Mike Mike
Mike Mike

Reputation: 1135

Why does li value sit lower than the list number in Safari and Chrome?

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!

Upvotes: 3

Views: 182

Answers (3)

Mike Mike
Mike Mike

Reputation: 1135

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/

Upvotes: 1

caitriona
caitriona

Reputation: 9131

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>

Upvotes: 0

domvoyt
domvoyt

Reputation: 416

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.

Upvotes: 0

Related Questions