So, I have this HTML table. All the TDs are centered with their content using text-align: center. In these TDs, I have two DIVs displayed on top of each other. The top one contains an IMG, and the bottom one just contains some text. Both contents are also centered. Now, using JavaScript DOM functions, I swap the top DIV with the IMG inside it with another DIV that contains two DIVs, which in turn contain text. The texts in the inner DIVs of the new DIV are centered. However, the DIV itself, which contains the inner DIVs, is no longer centered relative to the encompassing TD. The problem is reproducible with Safari and Camino - somehow the "align content center" property is lost for the newly added elements. I've tried all possible CSS attributes and experimented with everything (e.g., checking if the old DIV with the IMG inside or the IMG itself has a value for left), but for some reason, it just won't work.
The background for all this: when you click on an icon, an IMG should be completely replaced with a DIV of the same size, containing some switches with which properties of the IMG can be changed. Basically, something similar to the widgets in Dashboard - configuration on the "back" of an image.
At the moment, I'm only taking over the height of the image, so the vertical alignment is perfect. However, the horizontal alignment remains dynamic. If I have two cells on top of each other and both switch to configuration, the table changes in width. This causes ugly jerking. But I don't want to statically expand the TDs, otherwise the layout would no longer dynamically adjust to the browser width.
Oh, and all this has to work with Safari, it's finally my main browser.
Update: in the comments, there are links to test pages with which you can see the effect.