Logo going behind menu in Internet Explorer 7

I had the same problem: http://UCconsortium.org . Worked in every single browser except IE7. I noticed you avoided the problem by moving the menu *under* the logo. But if you (or anyone else) wants a real fix, here are a couple solutions:

Google Code is hosting a java script called ie7-js: http://code.google.com/p/ie7-js/ . It forces older IE browsers to render things like modern browsers. It has a whole collection based on which standard you want to use. For example, if you're coding for IE7, it will make IE6 and earlier display like IE7. IE8 rendered my site just fine, so I tried the IE8.js script. Here are instructions for embedding javascript in Drupal themes: http://drupal.org/node/304255 . Unfortunately it didn't work for me.

Second solution is to use a css hack. Here's a great page laying out the different hacks you can use: http://www.webdevout.net/css-hacks . For me, I used the simple *property: value hack, even though it violates CSS validation standards. So here's how my css looks:

#menu {
height: 35px;
background:url(images/menu-bg.gif) repeat-x;
width: 752px;
margin: 0 auto;
float: left;
/* I hate Microsoft */
*position: relative;
*left: 170px;
z-index:911;
}

You can see I also used the z-index fix described here: http://drupal.org/node/925002

Hi,

Maybe you can add:

<div style="clear:both"></div>

Under the menu div in page-front.tpl.php and page.tpl.php

      </div> <!-- /primary -->
    <?php endif; ?>
<div id="rounded-menu-right"></div>
</div> <!-- end menu -->

But the best is adjust header height and logo height:

#header {
height: 66px;
position: relative;
width: 950px;
margin: 0 auto;
}
.logo IMG {
height:50px;
}

Dan