jQuery & IE7 render bug with slideToggle()

Question

Hello all, I have worked quite a bit with jQuery and slidetoggle effects without coming across this bug before. The page is http://gilman.oomphdev.com, and the bug is when a user clicks the "What's This?" tag at the top of the page in IE7. Also, when one clicks the "Contribute Yours" link (right hand column, bottom-ish of white box) to open the comment form.

The slideToggle effect is pushing some content down, but not others, and the element being turned from display: none to display:block flickers and then disappears. There are elements with "float" inside the container being shown/hidden, but I use a clearfix to help give the container height.

I thought this was a z-index issue, so I found some jQuery that looped through the whole DOM and manually gave every DIV a z-index, but that did not help. I also played with position:relative on some elements but that didn't help either. I was using CSS3 PIE to render some CSS3 effects, but have since turned that off in order to narrow down the field of possible bugs.

So far, I'm stumped. Any insight would be appreciated. My main stylesheet is at:

/wp-content/themes/thinking/styles/screen.css

I also have a stylesheet in that directory for ie.css and reset.css

Answer 1

Right... that's the development server. Well, the site has been soft-launched, so, yeah... here is the public URL: thinkingarizona.com

Answer 2

You want to add the following line to your css, in your clearfix class:

clear: both;

Because in IE7 the clearer has found some space next to the floats. And a block-level element will just be in that space, unless you use a clear:both; which makes the block element go down untill there are no floats next to it.

I hope this explanation makes sense.

Also, make sure you are using a correct doctype (this can solve a lot off cross-browser bugs). You can find those doctypes at the w3c doctype page.