Problem with Round Corners – CSS Layout

I am trying to create round corners in CSS based on the tutorial at “A List Apart” (http://www.alistapart.com/articles/customcorners2/). I made the graphics and coded the CSS & html. Distinction in the graphics and CSS do exist, hence the reason the copy & paste code did not work. The page does not render as expected in Firefox in particular the footer section. I have spent a week reviewing the CSS and have not discovered my misstep. I beg someone on this forum to review my CSS and lead me to a resolving the situation. I am having difficulty understand the padding, margins and relative positioning in CSS. The attachment contains the html, CSS, and some JavaScript code. Please clarify suggestions with examples, links, or other generally useful information.

 

I have uploaded a live site at geocities since this a personal endeavor without a web home. You could view the site here; http://www.geocities.com/robert_neville310/aquav1.html.
I placed border around the footer class and <p> tag to show the incorrect spacing associated with these styles. I was hoping the border would help align the element, but I have not found the logical pattern behind the spacing; changing the padding only makes hard to align the graphics. The padding of the h3 tag (top of the box) seems excessive as well. Let me know if you could lead me in the right direction and determine if a pattern exist. The padding logic will help when changing the graphic sizes. Please clarify suggestions with examples, links, or other generally useful information.

 

Don't use relative positioning to fix poor styling. It's a simple menu, just stack up all the boxes, remove relative positioning from all elements and use padding and margins to control how far apart all the borders are. It's better to use divs for menu items, not <li>'s.

J.D.

 

Oh, yeah, the corners. Stick a float in each corner:

<style type="text/css">
div.corner {border: 1px solid red; width: 25px; line-height: 0; height: 25px;}
</style>
...
<div id="left">
<div class="corner" style="float: left;"></div><div class="corner" style="float: right;"></div>
	<div class="Article"><h3>Main Menu</h3>
		<div class="ArticleBody">
			<ul class="treemenu">
			<li>Top Level Item
  				<ul><li><a href="">List Item 2</a></li></ul>
			</li>
			<li>Top Level Item 2
  				<ul><li><a href="">List Item 3</a></li></ul>
			</li>
			</ul>
		</div>
		<div class="ArticleFooter"><p>&nbsp;</p></div>
	</div>
<div class="corner" style="float: left;"></div><div class="corner" style="float: right;"></div>
</div>

Code (markup):

J.D.