Ok, I'm just learned CSS and html this semester and I'm building my final class project on MC Escher. I'm using an external css file and I have a "wrapper" for all pages in order to center them. The problem I have is (1) that the navigation bar shifts around (12px or 1em) from the top and (2) the wrapper doesn't cover the whole page content (i.e. the bottom navigation links seem to just hover around near the bottom, but not at the correct location).

- Only home, book review, feedback, and works cited pages work
- home and works cited page has the navigation bar 1em/12px from the top
- book review and feedback page has the navigation bar has 0 margin from the top

I don't seem to have any problems when viewing with IE, only in Firefox. I tried having a separate class that would reduce the top margins for the home and works cited page to -1em or -12px but that didn't work.

I don't understand why the margins shift for certain pages or why the "wrapper" doesn't cover the entire content.

Help is greatly appreciated. Thanks in advance.

site links:
-home page: http://escherdraft.runhost.net/home.htm

-book review: http://escherdraft.runhost.net/bookreview.htm

-feedback (*submit button doesn't work yet): http://escherdraft.runhost.net/feedback.htm

- works cited: http://escherdraft.runhost.net/workscited.htm

- css link: http://escherdraft.runhost.net/global.css

-js link: http://escherdraft.runhost.net/global.js

#1 - validate your code. you've got a batch of errors there, mostly due to the incorrect width and height on your images. You do NOT use "px" on the dimensions on an <img> tag.

Your #wrapper doesn't 'wrap' around the content because you're using position:absolute and position:relative for just about everything rather than properly using the document flow. Also, if you use floats, you must CLEAR your floats in order for the #wrapper to 'wrap' properly.