Header is messed up in IE 7-8 - html

Question

The page I am working on is displaying perfectly in Chrome, Firefox, Opera and Safari (in both Mac and Windows) except in IE 7 & 8. The header is suppose to look like this:
but in IE it appears like this:
before we were using position: relative; for our class container in our charity.css file, but i had to remove that as it was creating problems in IE w/ my drop-down menus.
Can someone PLEASE help me?! I am so out of ideas now :(
Here is the [page] (however, i would have to remove the link later) Any help will be highly appreciated!!
Edited: here is the jsfiddle: http://jsfiddle.net/walahh/QwFL6/ it's not exactly the same page...but hopefully you will get the idea.

Answer 1

The only change I can think of would cause a somewhat significant change in your markup.
Basically, I'm pretty sure that this has to do with float:left and float:right elements not being cleared. IE is notorious for incorrectly propagating the float property to elements which weren't intended to be floated. To avoid this - when floating - it is common to do something like this...
CSS:
.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }
And then doing this in your markup:
<div>
<div class="fl"></div>
<div class="fl"></div>
<div class="clr"></div><!-- This element stops float from going to unintended elements -->
</div>
This is ideally how you would position floated elements for cross browser support.
If reworking your markup isn't doable, you could try adding empty elements, with a clear: both; style, as the LAST SIBLING of floated elements. So...taking your ul#secondNav as an example you could try this...
<ul id="secondNav">
<li class="stuff"></li>
<li class="stuff"></li>
<li class="stuff"></li>
<li style="clear: both;"><!-- Leave empty --></li>
</ul>

Answer 2

So apparently the fix was pretty simple....i was making it way too complicated.
What I (also) didn't know was "In IE the z-index can not be higher than the contain element's z-index."
So I went back to the original file, where they had .container{width:940px; margin:0 auto; position: relative;} and left it as it is. Then added z-index values for the #header{.....; z-index:1; } and #mainNav{...; z-index:2;} And that took care of the...
hidden drop-down menu(s)
messed up header
here is the modified code: http://jsfiddle.net/walahh/QwFL6/3/
hope this helps someone :) and thank you everyone who took their time to read my post and help me.