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 almost 10 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 almost 10 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 almost 10 years ago by Holden Thomas