Dynamically adding content to a UI with javascript squashes content below in IE7 and 8

Question

Hi there,

can anyone help?

I have a simple html file which i am filling via javascript, in firefox all the content below autosizes hence the more content i add the content below (in another div) moves down but in IE it doesn't. I am using overflow set to visible

this is the html (part of) - its the id="extras" i am adding to, i am adding a number of checkboxes and comboboxs etc

  <ul id="extras" style="padding:0px; margin:0px; list-style:none; ">
  <li style="width:248px; background-repeat:no-repeat; float:left; ">

The javascript i am using basically i have load in another file html file and get a reference to it and add controls etc..

The only special thing i have is overflow set to visible, as i say it works great in Firefox but IE .. the footer (content below in another div) doens't resize so the this content overlaps the footer - well some of it.

tempDetails.prototype.showData= function() {
    if (this.req.readyState == 4) {
        var container = this.loadedLayer;
        container.style.overflow = 'visible';


        container.innerHTML = " ";
        container.innerHTML = this.req.responseText;

Answer 1

Make sure your float is cleared or you use the clearfix hack on the UL container.