I have a page with a liquid layout, that when the browser window is made narrower, certain elements of the page move in a liquid way. The effect works perfectly in IE and Safari, but in Firefox, at a certain point, a portion of the page "jumps" as extra space is inserted.
The screen shot below shows the "normal" look of the page:
The following screen shot shows what the same page looks like in Firefox when the browser window is narrowed just slightly:
If you look carefully, you will notice that in the second screen shot there is more space below the table in the upper right and the row of tabs ending with "Free & Deals." Because the "Explain it to me" audio control and FAQ light bulb are positioned absolutely, they have appeared to jump up onto the horizontal bar. However, they have stayed in the same place, and the tabs and everything below have jumped down.
There is a <ul> around the tabs that has padding-top of 10px. If I reduce this in Firebug, the proper positioning of the page can be restored. However, this only demonstrates a possible approach, as it don't think it is a practical approach to try to adjust this for Firefox as the browser is being narrowed.
So I am wondering if there is some styling attribute that I can add to make Firefox less liquid with respect to this jumping.
Naturally, I don't want to break the already properly working Safari and IE.