Weird position movements between similar pages

[dfloss]

http://tinyurl.com/2a5tjn

If you scroll through the various linked pages, the nav arrows and/or
column border are in a different position by around two pixels on
various pages. They all use the same code for the top, left and bottom
div's, with the exception of the column border (which may be attached to
the left or right column).

Results in various browsers:
* IE6 & Opera: arrows never move, column borders move
* Firefox: arrows and column border move

Any thoughts?

 

[Jonathan N. Little]

http://tinyurl.com/2a5tjn

If you scroll through the various linked pages, the nav arrows and/or
column border are in a different position by around two pixels on
various pages. They all use the same code for the top, left and bottom
div's, with the exception of the column border (which may be attached to
the left or right column).

Results in various browsers:
* IE6 & Opera: arrows never move, column borders move
* Firefox: arrows and column border move

Because you are using a table for layout, a table by default tries to
expand to accommodate the content, and since the content changes from
page to page the table adjusts. Use DIVs and you can stop the shift.

 

[dfloss]

Because you are using a table for layout, a table by default tries to
expand to accommodate the content, and since the content changes from
page to page the table adjusts. Use DIVs and you can stop the shift.

After digging in, I located the problems. They weren't related to
tables, all of which are inside containing <div>'s.

The column border problem was pixel error {margin: __px}. The
horizontal position was off by one pixel when the border was attached to
the right column.

Arrow movements are still a bit obscure, but look like a Firefox bug.
The arrows (which are absolutely positioned) move left slightly when
Firefox has a vertical scroll bar. They don't move in other browsers.

 

[Jonathan N. Little]

After digging in, I located the problems. They weren't related to
tables, all of which are inside containing <div>'s.

The column border problem was pixel error {margin: __px}. The
horizontal position was off by one pixel when the border was attached to
the right column.

Arrow movements are still a bit obscure, but look like a Firefox bug.
The arrows (which are absolutely positioned) move left slightly when
Firefox has a vertical scroll bar. They don't move in other browsers.

pixel spacing and tables are not helping your design.

 

[dfloss]

pixel spacing and tables are not helping your design.

That may be true, but tables allow the viewer to change the browser font
size and everything is still aligned properly.

Incidentally, the arrow position bug is now fixed. "margin: ... auto"
in the main container css was the culprit.

 

[Jonathan N. Little]

That may be true, but tables allow the viewer to change the browser font
size and everything is still aligned properly.

That has not nothing to do with tables. If you don't size your block
element in px's but in em's any block element will scale with your
font-size.

Incidentally, the arrow position bug is now fixed. "margin: ... auto"
in the main container css was the culprit.

Of course, as the content dimensions changed from page to page to
calculate even margins on changing widths the values would be different!