Obtenir cette CSS pour travailler dans IE6

Question

Travailler sur cette page: http://www.karlsenner.dreamhosters.com/about.php et avoir des problèmes avec la navigation dans IE6. Il valide en tant que XHTML 1.0 Transitional. Fonctionne très bien dans FF, IE 8, Chrome et Windows Safari. Dans IE6 et Opera 10, les menus déroulants apparaissent trop élevés.

J'ai essayé d'ajouter dans les différentes versions de http://code.google.com/p/ie7-js/ mais cela n'a pas résolu le problème dans IE.

Le CSS ressemble à ceci:

#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; 
} 

renversements 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'); 
}); 

Et l'une des cellules. Puisque le menu sort de PHP et que IE ne respectait pas les largeurs, j'utilise simplement PHP pour obtenir les largeurs d'image nav et les écrire dans les styles à la volée. Résolu le problème de largeur comme IE a agi comme ils devraient hériter de leur largeur de l'encapsuleur. Cela peut être un indice quant à pourquoi ils n'apparaissent pas au-dessous de leurs images de nav mais je ne peux pas le trier.

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

Tout conseil grandement apprécié!

JG

Answer 1

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

Vous faites ce un DIV en ligne, mais il est vraiment pas un DIV en ligne. Il est utilisé plus comme display: block;

Dans IE6 .navImage est rendu comme un bloc, c'est pourquoi vous voyez la différence.

Vous devriez faire un .navImagedisplay: block; et utiliser float: left;

Rappelez-vous aussi pour effacer vos flotteurs.

Ensuite, votre top:14px sera changé pour top: 102px;