Have Geek Brain

Extending the DIV of the slides behind the DIV below it

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

I have a structure 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 some code that toggles the display of my hidden div using jQuery and .show (). This works fine in IE8, firefox and Safari, but when I paste IE8 into compatibility mode then the first set of fields (Test A) will expand, but the expansion happens behind the second set of fields that does not move (i.e. it slides down it ).

I have quite a lot of CSS in use here and will have to go back and unlock the ellipsis, which is of no interest. If anyone has any idea of ​​one of the IE7 rendering issues that might be affecting this, I'd really appreciate it. (note that these fieldsets have more content than shown, including floating divs).

Quick note - if I put IE7 in quirks mode it works (but floods the rest of my layout) - in standard mode I get the above behavior.

+2


a source to share


3 answers


It looks like it was a combination of different position: relative and position: static layout elements (somewhat nested from earlier). When my margins were relatively positioned, they didn't change (due to other styled elements around them).



Position: static seems to have done the trick.

0


a source


I just solved this problem on my site. Float: Left and Position: Relative trick.



+1


a source


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

0


a source






More articles:


All Articles