<li> styling with css (chrome problems) - css

Question

Hello I've got this weird problem with css.
I'm displaying an unordered list
<ul>
<li>
<div class='align-left'>
PMI
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='19' class="elim" name="19">
</div>
</li>
<li>
<div class='align-left'>
GRANDS COMPTES
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='21' class="elim" name="21">
</div>
</li>
<li>
<div class='align-left'>
associations
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='22' class="elim" name="22">
</div>
</li>
<li>
<div class='align-left'>
PME
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='25' class="elim" name="25">
</div>
</li>
<li>
<div class='align-left'>
ecoles privees
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='28' class="elim" name="28">
</div>
</li>
<li>
<div class='align-left'>
organisme
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='32' class="elim" name="32">
</div>
</li>
<li>
<div class='align-left'>
test
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='34' class="elim" name="34">
</div>
</li>
</ul>
now this is accompanied by these css rules:
.align-right{
float: right;
}
.align-left{
float: left;
}
On chrome, the bullet point from the list is actually UNDER the text for the bullet point.
Why did I do this, I want the images to be aligned from top down.
here are screenshots of the problem
thanks in advance.

Answer 1

the code you provided won't cause this problem.
Depending on what you want to do, adding
ul { list-style-type:none; }
or
ul li { padding-left:40px; }
may achieve desired effect.
edit
try adding overflow:hidden; to the li elements
I'd also personally do it like this:
li {
background:url(/img/delete_icon2.png) no-repeat center right;
padding-right:25px; /*might need to adjust */
}
<ul>
<li>PMI</li>
<li>Bla bla</li>
</ul>
no need to over-complicate things.
If you want the DIVS clickable you can just do
<li>PMI</li>
and CSS:
li a { display:block; width:xxx; height:xxx; }
as required.

Answer 2

Try playing with the list-style-position property. Options are inside and outside.

Answer 3

I had the same problem and it seems that you do not have exact control over the position of the default bullet point.
For me the following was working in Firefox and in IE, but in Chrome it is positioned inside the text:
<ul style="list-style-position: outside; margin:0; padding:0;">
<li />
<li />
</ul>
I needed to set margins and paddings for both the list and the list items to get the bullet point(disk) outside the text
<ul style="list-style-position: outside; margin:10px; padding:10px;">
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>
The strange part is, that if I set those bottom margins to anything less than 7 pixel, the bullets jump inside. 8px is the smallest working value, although there is lots of space around and between the elements (they move closer to each other fluently, only the bullet points start to jump).