Div behavior ?

build viewing - ok vs. viewing on different machines - not ok

[jea800]

To start with, I'm new to working with divs and don't understand what is happening... when I view the webpage from my live system's browser/s, the "absolute" position of the divs (there are two I'm playing with - on the same page) appear fine/ok. However, when I check the same page on different machines the divs are in different places. It seems the divs are moving RIGHT in some cases, on some machines, and LEFT in some cases, on other machines. It doesn't seem to matter whether I'm using IE or FF. Finally, the divs movements appear to be only right and left, not up or down. And, if one div moves left, they both do. The same can be said when the div moves right.

Any ideas as to what is happening here would be greatly appreciated.

[rocknbil]

Welcome aboard jea800, table-less semantic layout can be daunting at first - a few things that will help, and are just good habits to form:

- Use a valid doctype [webmasterworld.com] and validate your code [validator.w3.org]. This will eliminate Quirks mode as the culprit. If your document is rendering in Quirks mode, some of your selectors may just not be working correctly.

- Put temporarily put borders on all your containers, this often gives a clear insight into who's not playing well with other elements.

- When in doubt, pare the code down to just the bare essentials that display the problem, and work with these until you understand what it's doing. If you can crack this egg, it will help in future development (rather than encountering the same problem again and again and applying a "fix" just to get through it.)

- If you've done the previous step, it will be easy to post the code here and one of the more experienced members will be glad to help.

[willis1480]

checkout yahoo YUI. They use a css base to even the start pointe for different browsers. Then they have a system for creating div layouts using a css class structure.

Never used it, but can be a solid way to get to good layouts that work on all "A" browsers.