13'sportif

Comme le rappel fort justement Raphaël Goetter via Alsacreations, ce qui est vraiment plus que pénible lorsque l'on développe des sites en respectant les standards (XHTML / CSS) c'est le temps passé à essayer de les rendre utilisable sous cette daube ancêtre d'IE.

Alors pour illustrer ça, voici un exemple criant. Le code suivant :

<style type="text/css" media="screen">
body {
 font: 70% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
 background: #F9F9F9;
 color: black;
}
.box {
 width: 170px;
 color: white;
 padding: 3px;
 margin: 1em;
 background-color: #79A7E2;
}
.box p { font-weight: bold; padding: 0px 5px; border-bottom: 1px solid #8CB3EF;}
.box a { color: white; text-decoration: none;}
.content_item a { display: block;}
ul.content_item {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.content_item li {
 margin: 0;  
 padding: 0;
 line-height: normal;
}
.content_item a {
 padding: 5px;
}
.content_item a:hover { color: white; background-color: #8CB3EF;}
   </style>

   <div class="box">
     <p class="header_box">Une petite liste</p>
       <ul class="content_item">
         <li><a href="#" title="">Bienvenue</a></li>
         <li><a href="#" title="">xml</a></li>
         <li><a href="#" title="">azerty</a></li>
         <li><a href="#" title="">20200</a></li>
         <li><a href="#" title="">logo</a></li>
         <li><a href="#" title="">Fiches complémentaires de détournement</a></li>
       </ul>    
  </div>

Donne ça sur un navigateur respectueux des standards :

Mais voilà, sous IE ça donne ça :

Super !! Donc ici on a deux problèmes :

1. Le {display: block;} sur la balise a n'est pas pris en compte. Il faut vraiment survoler le lien pour que celui-ci soit actif !
2. Il y a un espacement (qui sort de nul part) entre chaque éléments de la liste (alors que tous les margin et padding sont positionnés à zéro).

Eh bien j'ai du lutter pour enfin trouver un hack pour IE :

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .content_item li { float: left; height: 1%;}
* html .content_item a { height: 1%;}
/*** End Hack */

Le résultat grâce au sympatique Holly Hack :