CODEWITHSUNDEEP
cssgoogle-chrome
cromestant
cromestant

Reputation: 660

<li> styling with css (chrome problems)

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.

Upvotes: 1

Views: 23419

Answers (3)

Alendia
Alendia

Reputation: 101

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).

Upvotes: 0

Ross
Ross

Reputation: 17977

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><a href="delete.php">PMI</a></li>

and CSS:

li a { display:block; width:xxx; height:xxx; }

as required.

Upvotes: 8

dclowd9901
dclowd9901

Reputation: 6826

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

Upvotes: 3

Related Questions