IE8 Toggle Bug?

Question

I think I have an issue with IE8 and it's driving me nuts. let me explain it with images and an online demo.

When you first visit the page it's all normal as you see below

Then when you click to the "Click here to add new one" button.. it displays a div that includes a form... untill now it still works fine as you see below...

When you click to "Cancel" button it hides form... but this time "Some text here" part collapse to the gree box above..

But when you try to select any text on the page or click any empty space on the page, "Some text here" returns back to normal position...

And the weird thing is, since there is a toggle function on the link you can also close form with "Click here to add new one" link and when you close form by clicking the "Click here to add new one" link it works fine...

I have also tried to use show(), hide() methods or addClass() , removeClass() with a class that includes "display:none"... I also tried toggleClass(), but no luck...

I think this is about rendering engine of IE8 but may be you HTML-CSS-jQuery gurus out there may know a workaround...

http://yasinergul.com/FlashDen/IE8-Toggle-Bug-Demo/

Best regards,
PDesignX

Answer 1

it seems like this is a IE8 render bug... i could currently handle it just using IE7 engine using that meta-tag below..

but this is not a solid solution to this any help will be much appreciated..

Answer 2

removing margin-bottom of the inf-box and adding padding to the div that contains "Some text here" solved the problem... it's said that this is a "collapsing margin" issue...

you can find a detailed description about it here

http://css-discuss.incutio.com/?page=CollapsingMargin