html - Misplaced list elements due to CSS in firefox and chrome -

i have list of names rendered inside <ul>. applied css code facing browser specific issues.

• chrome : list element getting displaced 1 row.

• firefox : list items collapsing 1 item.

code snippet (js bin editor)

html

<div id='container'> <ul class='list'>   <li> <div class='rel'>            <div class='abs'> item 1 </div>   </div> </li>    ... more items similar above 1 

css

#container {   height: 100px;   overflow-y:scroll;   width: 200px }  .list {   background-color: skyblue; }  .rel {   position: relative; }  div.abs {   position: absolute;   left: 20px; } 

i want know reason of misbehavior in both browsers. have written wrong css ?

update: in <div class='abs'> have lot of code have not added here not necessary , content of abs div positioned respect parent i.e. <div class='rel'>

the problem indeed

div.abs { position: absolute; left: 20px; } 

this positions every element class "abs" 20px left (and 0px top) of ul element.

what achieve? menu horizontally or vertically?

horizontally: use float:left or display:inline margin-left:20px;

vertically: 20px margin-left: http://jsbin.com/ediloh/17/edit

i first added margin:0px delete top , bottom margin of ul element. next added left margin of 20px move right.

alternative: put margin-left on li-element instead. not move circles