Firefox page "moves" when hiding/showing divs

Question

We have a web page with this general structure:

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

With this CSS:

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
 advanced.style.display = '';
 basic.style.display = 'none';
} else {
 basic.style.display = '';
 advanced.style.display = 'none';
}

This all works great in IE.

It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?

Answer 1

I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.

Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.

With firebug you can view what may be different between the two divs.

From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.

One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.

I hope this helps.

Answer 2

Is it causing a scrollbar to appear / disappear?

Answer 3

Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.

Answer 4

Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).

On a side note jquery has some really nice animations that make this switch much nicer on the eyes.

Answer 5

What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }

Here's a good related SO post.