CSS Positioning Woe (IE, Firefox) 1

[fallenacorn]

hello all, i am new to these forums, seeking some advice... possibly some criticism. anyway, if you take a peek @ :

http://www.thefallenacorn.com/test/test.css

http://www.thefallenacorn.com/test/test.htm

in IE, you can see my rounded tabs at the top of the screen, with no space above. In FF, there is an odd chunk of space above the tabs, and in both browsers, for the life of me, i can't seem to place those tabs at the bottom of my header (header is a div 80px high, with a background image 60px high, so tabs should sit on bottom of header div...)

wasting away the time thru trial and lots of errors.

any help or direction is greatly appreciated.

thanks.

 

[Vragabond]

Here's my suggestion to get your menu where you want it. Add the following to your css:

.menu {
	position: absolute;
	bottom: 0;
	left: 0;
}

As a general, I have the following comments:
1. Your CSS is big and employs a lot of hacks. With correct doctype (you have that) IE6 (which is now the most popular IE browser) will use correct box model, so you might want to remove as many hacks as you can.
2. Try to avoid using absolute positioning for the elements. Usually it is ok, if you absolute position certain elements within others (like I did for your menu) but it is much better for the main elements to follow the flow of the page.
3. Good work, looks good.