Expanding DIV slides behind DIV beneath it...

Posted by Paddy on Stack Overflow See other posts from Stack Overflow or by Paddy
Published on 2010-04-27T13:42:01Z Indexed on 2010/04/27 13:53 UTC
Read the original article Hit count: 279

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about jQuery