title: CSS doesn't apply to dynamically created elements in IE 7?
body: <p>Still looking for an answer.</p>
  
  <p>Changing or reassigning to the filter's <code>innerHTML</code> successfully redraws the element, but breaks my script, so that's out.</p>
  
  <p>Adding additional child nodes, including text nodes, does not force a redraw. Removing the added node does not force a redraw.</p>
  
  <p>Using the ie7.js family of scripts does not work.</p>
  
  <hr>
  
  <p>In the project I am working on, I dynamically generate (with javascript) filters that look like this:</p>
  
  <pre><code>&lt;div class="filter"&gt;
      &lt;a ... class="filter_delete_link"&gt;Delete&lt;/a&gt;
      &lt;div class="filter_field"&gt;
          ...
      &lt;/div&gt;
      &lt;div class="filter_compare"&gt;
          ...
      &lt;/div&gt;
      &lt;div class="filter_constraint"&gt;
          ...
      &lt;/div&gt;
      &lt;div class="filter_logic"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have CSS that applies to each filter (for example):</p>
  
  <pre><code>.filter a.filter_delete_link{
      display:block;
      height:16px;
      background: url('../images/remove_16.gif') no-repeat;
      padding-left:20px;
  }
  </code></pre>
  
  <p>However, it seems in IE 7 (and probably 6 for that matter), these styles don't get applied to the new filters.</p>
  
  <p>Everything works perfectly in Firefox/Chrome/IE8.</p>
  
  <p>Using the IE8 developer tools, set to IE7 mode, the browser can see the new elements, and can see the CSS, but just isn't applying the CSS.</p>
  
  <p>Is there a way to force IE to reload styles, or perhaps is there a better way to fix this?</p>
  
  <hr>
  
  <p><strong>The JavaScript:</strong> (simplified)</p>
  
  <pre><code>var builder = {
      ...
      createNewFilter: function() {
          var newFilter = document.createElement('div');
  
          var deleteLink = document.createElement('a');
          deleteLink.href = '#';
          deleteLink.setAttribute('class','filter_delete_link');
          deleteLink.title = 'Delete Condition';
          deleteLink.innerHTML = "Delete";
          newFilter.appendChild(deleteLink);
  
          var field = document.createElement('div');
          field.setAttribute('class','filter_field');
          var fieldSelect = this.getFieldSelectBox();
          field.appendChild(fieldSelect);
          newFilter.appendChild(field);
  
          // more of the same...
  
          deleteLink.onclick = function() {
              builder.removeFilter(newFilter);
          };
          fieldSelect.onchange = function () {
              builder.updateFilter(newFilter);
          }
  
          return newFilter;
      },
      addNewFilter: function() {
          var nNewFilter = this.createNewFilter(this.numFilters++);
          this.root.insertBefore(nNewFilter,this.nAddLink);
  
          //other unrelated stuff...
  
          //provided by Josh Stodola
          //redraw(this.root);
  
          return nNewFilter;
      }
  }
  </code></pre>