The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Problem with footer - link provided

On the home page (linked above) theres a photo, then you'll see a big gap below that, then the footer. I'm trying to get rid of this gap, but cant seem to do it for some reason.
Pages with no content on them are ok.
Whats causing the gap? (No, theres no p or br's etc and Ive checked margins and padding as far as i can see)

I'm sure its quite a simple answer... anyone?

edit: would also LOVE if someone could tell me whats stopping this from working in mozilla

The problem is that you have used the wrong positioning system with all your elements. Position:relative wasn't designed for laying out a whole page and is causing the problems you have.

position relative moves an element in relation to itself but as far as any other elements on that page are concerned the elements remains where it was. This is why you get loads of white gaps around the page where elements were until you moved them somewhere else.

You should be using absolute positioning or floating elements or no positioning at all (static). Position relative is used for small scale effects and nudging elements on top of other elements without altering the structure or flow of the page. If you need to use relative positioning for anything else then the chances are you are doing it wrong. (there are some exceptions of course).

You need to replan your playout into a logical order and use a mixture of static, absolute and floated elements to achieve your layout.

As I have no idea where you are going with this layout then this code may be totally wrong for you, however it should give you some ideas on how to construct things.

and the teacher never said that relative positioning shouldnt be used for a whole layout

Well you could use it for a whole layout but its not advised. Anytime you position an element with relative positioning you leave a hole in the page where the element was. That alone makes it too hard for the whole layout unless you know exactly what you are doing . But there are better and easier ways.

Paul O'B, you'll notice on the one i originally posted, the main part of the header is located to the right of the top banner. On the new one you posted its on the left.
You didnt specify any positioning rules for this, so how would i safely move it back to the right without messing things up?

edit: i did it using relative positions, just for the header. hopefully it wont mess other things up

couldnt do that with the header (align right) as it has a bg image, and the image on top of that is what i wanted aligned right.
I got that sorted now.

I do have another problem. I cant upload it because my webhost is playing up, but i'll try to describe.
On one of my pages, I have a long table (its a list of audio recordings). I had it set to 80% width, but rather than just stretching the page to bring on a horizontal scroll (which is what i want it to do - it is fine for this situation), it positions itself in line below the navigation. How can i make it so it sits beside the navigation without reducing the width of the table?
I've tried the clear property but that doesnt seem to help.

Hopefully you understand what Im talking about, if not i will post a link as soon as i can

I had it set to 80% width, but rather than just stretching the page to bring on a horizontal scroll (which is what i want it to do - it is fine for this situation)

How can i make it so it sits beside the navigation without reducing the width of the table?

I'm not quite sure what you mena but if you want the table to stay full width then you could put it inside another div that has the width specified and set the overflow to auto. You could then put your table inside with the correct width and the scrollbar should appear on the outer div. The user could just scroll the dix to see the table rather than scrolling the whole window.

You should always try to avoid having a horizontal scrollbar on the window at normal sizes.