Hey Guys, I'm trying to position a command link and an animated gif to the right side of the container. Here is the html that I've used. <div style='float: right; '> <img id="prereq_section_indicator" src="/images/hypnotize_out.gif" style='display:none;' /> | <a onclick="toggleControls(); return false;" href="#">Cmd</a> </div> When I click on the 'Cmd' link, the javascript (toggleControls) makes the animated gif appear. However, when it appears, the link 'Cmd' jumps down about 5px. I think the issue is that when the image appears, the rendering engine recomputes the positions of the elements.. which causes the 'Cmd' link to jump down. Any suggestions on how to fix this would be really welcome. Sonny.
I would try using visibility: hidden; instead of display: none; to hide the image. You'll just need to change the visibility to visible (instead of display to block, or whatever you happen to be using) inside the toggleControls function. visibility: hidden; means that the element retains it's space in the page, but it just doesn't show up. Since display: none; means the element is not rendered at all, then elements on the page must be re-rendered to make the element displayed. Hope this helps.