Как заставить этот CSS работать в IE6

Question

Работа на этой странице: http://www.karlsenner.dreamhosters.com/about.php и проблемы с навигацией в IE6. Проверяется как XHTML 1.0 Transitional. Прекрасно работает в FF, IE 8, Chrome и Windows Safari. В IE6 и Opera 10 выпадающие меню выглядят слишком высоко.

Я пытался добавить разные версии http://code.google.com/p/ie7-js/, но это не решило проблему в IE.

CSS выглядит так:

#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 ролловеры:

$('#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');
});

И одна из камер. Поскольку меню выходит из PHP и IE не учитывает ширину, я просто использую PHP, чтобы получить ширину навигационных изображений и записать их в стили на лету. Решил проблему ширины, поскольку IE действовал так, как будто они должны наследовать свою ширину от оболочки. Это может быть ключом к пониманию того, почему они не отображаются под навигационными изображениями, но я не могу их отсортировать.

<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>

Любой совет с благодарностью!

JG

Answer 1

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

Вы делаете это встроенным DIV, но на самом деле это не встроенный DIV. Используется больше как display: block;

В IE6 .navImage отображается как блок, поэтому вы видите разницу.

Вы должны сделать .navImage a display: block; и использовать float: left;

Также не забудьте очистить свои поплавки.

Тогда ваш top:14px будет изменен на top: 102px;