Expanding DIV slides behind DIV beneath it...

Question

I'm not sure that I'm going to get an answer here, as I'd need to post a lot of CSS and html to get a working recreation, however...

I have structure something like this:

<fieldset>
    <legend>Test A</legend> 
    <h3>Test A</h3>   
    <p>
        Something here.
    </p>
    <div style="display:hidden;">I'm dynamically displayed</div>
</fieldset>

<fieldset>
    <legend>Test B</legend> 
    <h3>Test B</h3>   
    <p>
        Something B here.
    </p>
</fieldset>

I have code that toggles the display of my hidden div using jQuery and .show(). This works fine in IE8, firefox and Safari, but when I stick IE8 into compatibility mode, then the first fieldset (Test A) will expand, but the expansion happens behind the second fieldset, which doesn't move (i.e. it slides down behind it).

I have quite a bit of CSS in use here, and I'm going to have to go back and unpick the whold lot, which isn't a fun idea. If anybody has any idea of one of the IE7 rendering issues that might be affecting this, then I'd very much appreciate it. (note that there is more to the content in these fieldsets than shown, including floated divs).

---

Quick note - if I stick IE7 into quirks mode, it works (but wrecks the rest of my layout) - in standards mode, I get the above behaviour.

Answer 1

It would appear that this was a combination of various position:relative and position:static layout items (somewhat bodged in from earlier). When my fieldsets were positioned relatively, then they weren't shifting (due to other styled elements around them).

Position:static seems to have done the trick.

Answer 2

check your z-index and that overflow:hidden is in the fieldset style