problème avec une image d'arrière-plan dans IE8

Question

J'ai essayé diverses corrections, mais je suis toujours incapable de résoudre ce problème plutôt irritant dans IE8. J'ai un container Div contenant deux Divs enfants, l'un flottant à gauche et l'autre flottant à droite. Il y a une image d'arrière-plan appliquée au conteneur DIV et cela se traduit comme il se doit dans ie6 et ie7, mais dans ie8 il n'apparaîtra tout simplement pas. Je pense que le problème est que le remplissage supérieur appliqué aux deux éléments enfants n'est pas respecté/appliqué par ie8, et puisque l'image d'arrière-plan a une hauteur de seulement 11px, les deux éléments enfants sont alignés contre le DIV parent et donc le l'image d'arrière-plan ne s'affiche pas.

Voici mon code et CSS:

 <div id="bottom"> 

     <div class="moduletable_footermenu"> 
    <ul class="menu"><li class="item56"><a href="/~domain/index.php?option=com_content&amp;view=article&amp;id=52&amp;Itemid=56"><span>Class Schedule</span></a></li><li class="item57"><a href="/~domain/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=4&amp;Itemid=57"><span>Testimonials</span></a></li><li class="item58"><a href="/~domain/index.php?option=com_content&amp;view=article&amp;id=53&amp;Itemid=58"><span>Contact</span></a></li><li id="current" class="active item59"><a href="/~domain/index.php?option=com_xmap&amp;sitemap=1&amp;Itemid=59"><span>Sitemap</span></a></li></ul> </div> 

    <div class="moduletable"> 
    Copyright &#169; -2010 sitename </div> 


    </div><!--end of bottom --> 

CSS:

div#bottom { 
clear:both; 
width:1014px; 
margin:0px auto; 
background:url(../images/footer-shadow.gif) top no-repeat; 
} 

div#bottom div.moduletable { 
width:400px; 
float:left; 
font-size:0.9em; 
color:#ccc; 
padding:15px 0px 15px 0px; 
} 

div .moduletable_footermenu{ 
float:right; 
padding:15px 30px 15px 0px; 
} 

Il doit y avoir quelque chose de spécifique à IE8 et probablement quelque chose de très petit l'origine du problème ici - quelqu'un peut-il s'il vous plaît repérer le problème? Je n'arrive juste pas à le résoudre, peu importe ce que j'essaie.

Reconnaissant pour toute aide.

Merci d'avance.

Answer 1

Avez-vous essayé Firefox et Chrome/Safari? Avez-vous utilisé le DOCTYPE standard? Ils devraient se comporter de la même manière que IE8.

En CSS standard, la hauteur du conteneur ne sera pas ajustée à la hauteur des boîtes flottantes; Je m'attends à IE8 pour ne pas montrer le conteneur (height = 0px) étant le fait qu'il s'agit d'un navigateur plus compatible avec les standards.

Si vous recherchez des effets dans IE6/7 dans un navigateur compatible, recherchez les solutions 'clearfix'.