Need help with absolute position overlapping divs

[devilzfan300]

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

[StarLab]

Just move <div id="navcontainer"> above you header pic. (Just below <div id="container"> and before <H1>)

Should do the trick.

Let me know...

Edit: Be sure to move all the code which appears within "navcontainer" to the new location.

[devilzfan300]

Didnt work. Check out the page. The header image just covers up the menu.

[StarLab]

Your use of the <span/> tag messed me up a bit, actually.

So, a couple more things to do:

h1 {
background:#44CCFF none repeat scroll 0%;
color:#FFFFFF;
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;
height:98px;
line-height:22px;
padding:32px 8px 0pt 0pt;
position:relative;
text-align:right;
width:772px;
}

Delete the "background" line altogether since "h1 span" is taking care of that.
Change:
height:118px;

h1 span {
background:transparent url(SitePath/testbanner.jpg) repeat scroll 0%;
height:130px;
left:0pt;
position:absolute;
top:0pt;
width:780px;
}

Change:
top: 15pt;

You can change the new values to suit your own taste.

Hopefully that will work for you this time.

[devilzfan300]

Perfect, thanks.

Do you think the coding for this is the way it should be done? A lot of people get thrown off by the span and I feel like its not the normal way of doing this...

[StarLab]

No problem. Glad I could help.

As far as how you used the <span/> tag, it works and the css validates fine.

I'm likely not the best one to say if it's proper or not. Perhaps others might have something to say on this?

PS: You have an error on XHTML validation. You defined id="open2" twice. Might want to fix that up

[devilzfan300]

CSS: www.missionenvironment.com/test/screen.css
URL: www.missionenvironment.com/test

Ok, so the coding before has worked, except the hover effect does not work. I moved the navbar to the footer and it works, so it is not the nav css, but rather the H1 and span messing up my navbar. Any suggestions?

[Costin Trifan]

The hover effect works just fine in IE 7.

[devilzfan300]

I also fixed this and forgot to delete my post. thanks anyway