I've just started creating a new design for my new site, and i've come to a problem with it. If you visit
http://vigge89.mine.nu/index/, you'll see that my #menu and #content DIVs are messed up, both in IE and in Firefox (different things though). In IE, the design looks like it should, apart from the space between the top "logo" and the menu. On the other hand, in Firefox, the logo and menu looks right, but the content-div is positioned wrong, there are no margin between the menu and main content. The problem seems to be that the menu is positioned under the menu-div, and not inside it as i should.
Here's a picture on how it should look like in all browsers:

The blue square is where the menu-div should be, and the red square is where the main content div should be positioned.
Pictures of how it looks like in IE and Firefox:
Internet Explorer:
Mozilla Firefox:
The CSS and XHTML code can be found here:
http://vigge89.mine.nu/index/index.phps - XHTML
http://vigge89.mine.nu/index/vigge.css - CSS
Do any CSS-gurus know how to solve this?
Note: since the files are located on my test-server on this computer, it isn't online all the time.