View Full Version : jquery toggle blind with negative margins

09-04-2008, 01:56 PM
This is probably best illustrated with an example, so: example (http://www.bencasey.co.uk/jtoggle/)

(Click the "Information Architecture" header to fire the effect)

The problem I have is this:

The light grey content box, with the dark grey header inside it, should slide into and out of visibility - which it's doing.

However, also I need the blue background image on the header bar to overlap the dark grey content header.

The way I've got this at the moment, I've simply used a negative topmargin on the content box to move it up, and z-index on that and the header bar to move it underneath. This does the job while everything is static. But while the animation is... animating, the effect is lost - the dark grey is no longer visible underneath the blue header image.

I'm not really sure what's causing this, whether its root is a CSS or JS issue. But I'd really appreciate any suggestions....


09-04-2008, 03:33 PM
No worries, figured it out. Took out the negative topmargin and used relative positioning with top: -5px; instead.

(doh :o )