Need help with absolute position overlapping divs

www.missionenvironment.com/test

I want to move the top nav menu above the header picture. I cannot seem to do this with the way the header image is implemented. Should I not use the span to put the image there? Or am I missing something?

CSS: www.missionenvironment.com/screen.css

Thanks

 

where/what is the nav menu? which picture is the header picture?

 

Well, first off for what's there for a menu you shouldn't be wasting a wrapping DIV - the extra lines around it are appearing though because the menu wrapper is set to float, but the h1 is not.

axe that ENTIRE menu section of HTML including the DIV for:

<ul id="mainMenu">
	<li class="current"><a href="http://www.wholesalechecklist.com/">Home</a></li>
	<li><a href="articles.html">Articles</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

Code (markup):

with the CSS:

#mainMenu {
	list-style:none;
	font:bold 100%/140% arial, helvetica, sans-serif;
	background:#036;
	overflow:hidden;
}

#mainMenu li {
	display: inline; 
}

#mainMenu a {
	float:left;
	padding:0.2em 1em;
	color:#FFF;
	background:#036;
	text-decoration: none;
	border-right:1px solid #fff;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:#469;
}

Code (markup):

given the simplicity of the menu, it shouldn't need haslayout in IE6/earlier, but if IE does misbehave with it, I'd suggest adding:

* html #mainMenu {
	height:1%;
	overflow:visible;
}

Code (markup):

Which would clear any IE6/earlier issues in the menu right up.

Though looking at the H1, you seem to have gone a LITTLE overboard with the font classes.

font-family:verdana,arial,sans-serif;
font-size:18px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:22px;

What the? You don't have any of that set in the body so most all of that isn't needed.

font:normal 18px/22px verdana,arial,sans-serif;

Should be functionally identical.