J'utilise des listes non ordonnées qui imbriquent des divs pour afficher le résultat souhaité à l'écran. J'utilise du css pour les styliser et elles semblent parfaites sur chrome et firefox. Mais dans IE(8), il semble y avoir un problème que je n'ai pas réussi à localiser.
J'utilise le CSS suivant
<style type="text/css">
.ur_container {width:980px; padding: 0; margin: 0;}
.ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; }
.ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; }
.bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;}
.bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;}
.bx_grp_title {float: left; font: bold 11px Arial; padding:5px;}
.bx_grp_options {float: right; font: 10px Arial; padding: 5px;}
.bx_grp_options a{color: #125B93; text-decoration: none; }
.bx_lnx {padding:0px; background-color: red;}
.bx_lnx_header {font:11px Arial; color:#333;}
.bx_lnx_title {float: left;}
.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
.bx_lnx_options {float: right;}
.bx_lnx_options a {color: #258CF4; text-decoration: none;}
.bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; }
.bx_lnx_notes {}
.bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;}
.bx_lnx_tags {}
.bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;}
</style>Contre le HTML suivant
<div class="ur_container">
<ul class="bx_grp" id="grp_1">
<li>
<div class="bx_grp_header">
<span class="bx_grp_title">Personal File</span>
<span class="bx_grp_options"><a href="#">rename</a> • <a href="#">make private</a> • <a href="#">hide</a href="#"> • <a href="#">delete</a></span>
<div style="clear: both;"></div>
</div>
</li>
<li>
<ul class="bx_lnx" id="lnx_1">
<li>
<div class="bx_lnx_header">
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>
<span class="bx_lnx_options"><a href="#">edit</a> • <a href="#">move</a> • <a href="#">delete</a></span>
</div>
</li>
<li class="bx_lnx_url">http://www.google.com</li>
<li class="bx_lnx_notes"><span>search google for this</span></li>
<li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li>
</ul>
</li>
</ul>
</div>Ce qui donne ce résultat dans Chrome et Fireworks texte alternatif http://haberhavadis.com/chff.jpg
et ce qui suit dans IE texte alternatif http://haberhavadis.com/IE.jpg
Les couleurs jaune et rouge ont été utilisées afin de montrer que tout va mal. La partie jaune est la partie non désirée.
Quelqu'un peut-il m'indiquer la bonne direction à suivre ?
Salutations
