I have some very odd problems with CSS in an autocomplete form which shows some basic text along with images. It works 100% fine in firefox, but not so fine in virtually everything other browser. (Safari, chrome, IE, you name it)

alt textalt textalt text

<ul class="currencies">

<li class="currency"><div class="image"><img src="/images/flags_currency/AUD.png"/></div><div class="name">AUD,<div class="country"> Australia<div></div></li>
</ul>

div.auto_complete {

    position:absolute;
    width:250px;
    background-color:white;
    border:1px solid #888;
    margin:0px;
    padding:0px;
}

ul.currencies  {
    list-style-type: none;
    margin:0px;
    padding:0px;
}
ul.currencies li.selected { background-color: #ffb; }
li.location {
    list-style-type: none;
    display:block;
    margin:0;
    padding:2px;
    height:32px;
}
li.currency div.image {
    float:left;
    width:32px;
    height:32px;
    margin-right:8px;
}
li.currency div.city {
    font-weight:bold;
    font-size:12px;
    line-height:1.2em;
}
li.currency div.country {
    font-size:10px;
    color:#888;
}

new change ->>> made image #3

ul.currencies li {
  clear:both;
}

2 answers

2
points
ul.currencies li {
  clear:both;
}

Floats remove elements from the flow, so your height is disregarded. Clearing your floats returns the that element to the flow of you page.

Answered over 7 years ago by Richard Testani
  • Kinda, it made it better... now instead of being all over the place they are cascaded, almost in a straight line (at least compared to before), but not clickable. Holden Thomas over 7 years ago
1
point

Found the problem...

<ul class="currencies">

    <li class="currency"><div class="image"><img src="/images/flags_currency/AUD.png"/></div><div class="name">AUD</div><div class="country"> Australia</div></li>
    </ul>

My divs weren't correct.

Answered over 7 years ago by Holden Thomas