IE, overflow and the disappearing list items

Greetings Friends,

I need some help! I've built an address finder where you enter a postcode then the "Find Address" button triggers a modal window. This modal window then takes the given postcode and loads in the appropriate data...

The troubles begin when you try to expand the address lis开发者_StackOverflow中文版t: the list expands then disappears in IE8. It works in FF.

A working example is at: http://www.equanet.co.uk/apply

Try using postcode: M24 2NN

The HTML for the generated content is:

<div class="addressFinder" style="position: fixed; top: 251px; left: 252px;">
  <h5><input id="closeBut" value="X" type="button"> Address finder</h5>
  <ul class="addresslist">
    <li class="area priv open"><span>Hereford Way, Middleton, MANCHESTER, Lancashire, M24 2NN</span>
      <ul style="display: block;" class="addresses">
        <li class="address" index="0" id="addr_0">< span>47</span></li>
        <li class="address" index="1" id="addr_1"><span>49</span></li>
        <li class="address" index="2" id="addr_2"><span>51</span></li>
        <li class="address" index="3" id="addr_3"><span>53</span></li>
        <li class="address" index="4" id="addr_4"><span>54</span></li>
        <li class="address" index="5" id="addr_5"><span>55</span></li>
        and so on...
      </ul>
    </li>
    <li class="area org"><span>Hereford Way, Middleton, MANCHESTER, Lancashire, M24 2NN</span>
      <ul style="display: none;" class="addresses">
        <li class="address" index="49" id="addr_49"><span>Bellinso, 98</span></li>
      </ul>
    </li>
</ul>
</div>

The CSS is:

.addressFinder { position: absolute; z-index: 999; display: block; width: 60%; padding: 0.5em; margin: 0; background: #DDD; text-align: left; }
.addressFinder h5 { margin: 0; font-size: 1.25em; line-height: 2; }
.addressFinder ul { list-style: none; marging: 0; padding: 0; }
.addressFinder ul.addresslist { height: 20em !important; clear: both; overflow-y: scroll; margin: 0; background: #EEE; }
.addressFinder ul.addresslist ul { height: auto; margin: 0 0 0 1em; padding: 0; }

.addressFinder .addresslist span { display: block; cursor: pointer; line-height: 1.5; }
.addressFinder .addresslist span:hover { text-decoration: underline; }
.addressFinder #closeBut { float: right; margin-top: 0.2em; }
.addressFinder .priv, .addressFinder .priv li { list-style-image: url(/ui/icons/house.png); }
.addressFinder .org { list-style-image: url(/ui/icons/building.png); }
.addressFinder .priv li { list-style: none; }

I'm unsure if it's a problem with my CSS or if I'm falling victim to a geniune browser bug.

Like I said in my comment, it works fine in my IE8. I'm assuming here you've somehow got your IE8 in IE7 mode, where the problem you describe occurs.

Remove position: relative from the li tags inside <ul class="addresslist">.

You have in your core.css:

li { position: relative; /* For IE list white-space bug */ padding-left: 0.25em; }

Remove that, just to test. If that resolves your problem, then:

• Please provide a reference link to the named "IE list white-space bug", so I can suggest what to do next (for example, what versions of IE does the named bug occur in?).

Alternatively, you can keep the above line, and just add this to your CSS:

li.area, li.address { position: static } /* to fix IE7 */

This will "remove" position: relative from just the afflicted <li> tags.