First time posting in the forums, let me know if I can make my post better.

I can't for the life of me figure out why IE7 and IE10+Compatibility Mode cuts off a banner image on a site I'm working on.
I'm fairly certain the image is fine in every other browser in existence.

This is the link to the site: http://lpi.oregonstate.edu/healthyyo...letters.shtml#

The image is at the very top left of the page.

If you go to Internet Explorer and access the developer tools (F12), you can switch between IE7/8/9/10/10+Compatibility and take a look.

Basically, the image is styled with:

#osu-bar .osulogo {
	float: left;
	margin-left: 60px;
	z-index: 999\9;
Here's the thing: after hours of trial and error I finally found out that if I took off the height property of the #header below it, the image shows up. I have no idea why though. I was going to post this question for help figuring out how to fix this, but now I want to understand why that is. I figure I've been skimming by my whole web design career on trial and error and it's time I should start really understanding cause and effects. So does anyone know what bugs of IE are causing this image clipping? The fix also solved a crucial bug where a popup for newsletter signup(clicking "here") was getting cut off as well.
#header {
	height: 120px; /*  if removed it works */
	background: #c34500;
	text-align: left;
	padding-left: 0px;
	border-left: 220px solid #ffffff;
	position: static;
	z-index: -999;
As you can see above I've tried targeting IE specifically with other fixes like z-index values but to no avail -- I have no idea why either.

Any ideas as to what is going on?