views:

122

answers:

3

I'm using the Blueprint CSS grid for my HTML page. I have a table which I want to show/hide - linking it to a button, using jQuery. The problem is that everytime I click on the button to show/hide the table, everything on the page shifts slightly left-right.

Is this a common problem? Does anyone know what could be causing this and what I could do to fix the other elements of the page such that they do not move?

Edit: grammar.

+2  A: 

This is probably just because the scrollbars on your browser are caused to appear and disappear, modifying your page width and changing where the center is.

If not a minimal code snippet would help identify the problem but I suspect its the scrollbar thing. I've had this problem too until I realized what was going on.

cletus
A: 

A little more detail would be nice. It's possible that your show/hide is adding an empty div somewhere, which would explain the shift. If the problem persists, you might try avoiding blueprint and make your own custom grid, if that is not too difficult.

happythenewsad
A: 

As cletus said it's probably a scrollbar issue. try this code

html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}
Derek