Getting this CSS to work in IE6

Working on this page: http://www.karlsenner.dreamhosters.com/about.php and having trouble with the navigation in IE6. It validates as XHTML 1.0 Transitional. Works great in FF, IE 8, Chrome, and Windows Safari. In IE6 and Opera 10 the drop menus appear too high.

I tried adding in the different versions of http://code.google.com/p/ie7-js/ but it did not solve the issue in IE.

The CSS looks like this:

#wrapper {
    position: relative;
    display: block;
    background-color: inherit;
    margin: 0px auto;
    padding: 0;
    width: 900px;
    min-height: 900px;
}

#nav {} 

.navImage {
    position:relative;
    display:inline;
    height:102px;   /* added in hopes of helping IE position but no dice */
}

.subMenu {
    position:absolute;
    z-index:10;
    background-color:#FFF;
    top: 14px;
    left:0;
}

.subMenu a:link, .subMenu a:visited, .subMenu a:active{
    display:block;
    width:90%;
    padding:6px;
    margin:0;
    color:#3CF;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    text-decoration:none;
    font-weight:bold;
}

.subMenu a:hover{
    display:block;
    width:90%;
    padding:6px;
    margin:0;
    color:#3CF;
    background-color:#CCC;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    text-decoration:none;
    font-weight:bold;
}

jQuery rollovers:

$('#navcompany').hover(function () {
    $('#companyMenu').css('display', 'block'); 
    $('#companyImg').attr('src','g/nav/company_over.gif');
}, function () {
    $('#companyMenu').css('display', 'none');
    $('#companyImg').attr('src','g/nav/company.gif');
});

And one of the cells. Since the menu is coming out of PHP and IE was not respecting the widths I just use PHP to get the nav im开发者_如何学Cage widths and write them to styles on the fly. Solved the width issue as IE acted like they should inherit their width from the wrapper. This may be a clue as to why they don't appear below their nav images but I can't sort it.

<div id="navcompany" class="navImage" style="width:128px">
  <a href="about.php">
    <img src="g/nav/company_over.gif" name="companyImg" width="128" height="102" border="0" id="companyImg"  alt="company" />
  </a>
  <div id="companyMenu" class="subMenu" style="display:none; width:128px">
    <a href="about.php">About us</a>
    <a href="location.php">Our location</a>
  </div>
</div>

Any advice greatly appreciated!

JG

---

.navImage {
position:relative;
display:inline;
height:102px;   /* added in hopes of helping IE position but no dice */
}

You are making this an inline DIV, but it's really not an inline DIV. It's being used more like a display: block;

In IE6 .navImage is rendered like a block, that's why you see the difference.

You should make .navImage a display: block; and use float: left;

Also remember to clear your floats.

Then your top:14px will be changed to top: 102px;