In the project I am working on, I dynamically generate (with javascript) filters that look like this:
<div class="
filter">
<a ... class="filter_delete_link">Delete</a>
<div class="filter_field">
...
</div>
<div class="filter_compare">
...
</div>
<div class="filter_constraint">
...
</div>
<div class="filter_logic">
...
</div>
</div>
And I have CSS that applies to each
filter (for example):
.
filter a.filter_delete_link{
display:block;
height:16px;
background: url('../images/remove_16.gif') no-repeat;
padding-left:20px;
}
However, it seems in IE 7 (and probably 6 for that matter), these styles don't get applied to the new filters.
Everything works perfectly in Firefox/Chrome/IE8.
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.
Is there a way to force IE to reload styles, or perhaps is there a better way to fix this?
