
Border becomes disconnected from element
I have a page that has six different PIEs on it.
It starts out with three, and they're all collapsed, like this:
---------------------------------
| + Thingamabobs |
---------------------------------
---------------------------------
| + Widgets |
---------------------------------
---------------------------------
| + Doohickeys |
---------------------------------
When I click the + button in any one of the PIEs, it will expand to show content: (as shown below). The PIE lower down on the page moves out of the way just fine.
---------------------------------
| + Thingamabobs |
---------------------------------
---------------------------------
| - Widgets |
| thing one |
| thing two |
---------------------------------
---------------------------------
| + Doohickeys |
---------------------------------
But then, if I want to edit one of the widgets, I hide the Widgets PIE (style.display = 'none') and display a Edit Widgets PIE (style.display = 'block') in it's place. Again, the Doohickeys PIE moves accordingly.
---------------------------------
| + Thingamabobs |
---------------------------------
---------------------------------
| Edit thing One |
| sub thing one |
| sub thing two |
| sub thing three |
| sub thing four |
---------------------------------
---------------------------------
| + Doohickeys |
---------------------------------
HERE'S THE PROBLEM: When I hide the Edit Widgets PIE (style.display = 'none') and redisplay the Widgets PIE (style.display = 'block'), the contents of the Doohickeys PIE retains its proper spacing from the bottom of the Widgets PIE, but the PIE border creeps up to display inside the Widgets PIE border.
---------------------------------
| + Thingamabobs |
---------------------------------
---------------------------------
| - Widgets |
| thing one |
---------------------------------
| thing two |
|--------------------------------|
---------------------------------
+ Doohickeys
Am I using the wrong display methods? Any other ideas?