[ Resolu ] Display-inline sous IE

Bonsoir,

la div head du site comprends un logo en float à gauche(#head p ) ,
puis deux ul de liens en float à droite et en display-inline, (#ddh, et #categories, l'une dirige vers d'autres pages du site et l'autre vers des pages web externes) puis une image en repeat-left pour finaliser le background...

les liens de chaque ul devraient donc s'aligner sur une seule ligne, à droite du logo.

c'est Ok sous FF et Mozilla , mais sous Internet Explorer la deuxième série de liens ne s'aligne pas complètement en 1024... ( et je n'en parle pas en 800X600, c'est une cata pour l'ensemble du site )

Or en lisant des articles sur la propriété display-inline , je n'ai pas vu de difficulté avec IE, (je charchais un hack IE approprié) .

http://www.avenir-geopolitique.net/

#head {
  background-color: #0a0c2b;
  background-image: url('img/degrade.png');
  background-repeat: repeat-x;
  background-position:  left bottom;
}
#head { 
  padding: .5em;
  /*width: 100%;*/
}

#head p {
  float: left;
  margin: 0;
}
#ddh, #categories {
  float: right;
  clear: right;
  margin: 0;
}

#categories { margin-top: 2em; }
#ddh { margin-top: .5em; }
#ddh li, #categories li {
  display: inline;
  margin-right: 1em;
  padding: 0;
}

common.php

<div id="head">
  <p>
    <a href="/">
	  <img src="<?php echo BASE_URL; ?>img/logo.gif" alt="Avenir Géopolitique"
	   title="Logo Avenir Géopolitique" />
	</a>
  </p>
  
  <ul id="categories">
    <li><a href="<?php echo BASE_URL; ?>politique/">Politique et dignité</a></li>
    <li><a href="<?php echo BASE_URL; ?>hacktivisme/">Hacktivisme</a></li>
    <li><a href="<?php echo BASE_URL; ?>dev_durable/">Développement durable</a></li>
    <li><a href="<?php echo BASE_URL; ?>web_libre/">Le web libre et rebelle</a></li>
  </ul>
  
  <ul id="ddh">
    <li><strong><a href="http://forums.avenir-geopolitique.net/">Forums</a></strong></li>    
	<li><a href="http://www.justice.gouv.fr/textfond/dudh1948.htm">Droits de l'homme</a></li>    
	<li><a href="http://www.justice.gouv.fr/textfond/enfant.htm">Droits de l'enfant</a></li>
  </ul>
  <hr class="spacer" />
</div>

qu'est-ce que j'oublie de faire ?

Merci
Modifié par Licia (18 Jul 2005 - 11:42)

Bonjour,

Le comportement d'IE me rappelle franchement un problème rencontré sur le site http://www.camo.qc.ca/ . Le détail de ce très obscur bug d'IE sur les flottants, si c'est bien celui-là, demanderait une très très longue explication

En tous cas, une solution bourrin mais apparemment efficace (vérifier s'il n'y a pas de dégâts collatéraux dans IEMac) :

<ul id="categories">
    <li><a href="http://www.avenir-geopolitique.net/politique/">Politique et dignité</a></li>
    <li><a href="http://www.avenir-geopolitique.net/hacktivisme/">Hacktivisme</a></li>
    <li><a href="http://www.avenir-geopolitique.net/dev_durable/">Développement durable</a></li>
    <li><a href="http://www.avenir-geopolitique.net/web_libre/">Le web libre et rebelle</a></li>
  </ul>

  [b]<!--[if IE]><div></div><![endif]-->[/b]

  <ul id="ddh" style="">
    <li><strong><a href="http://forums.avenir-geopolitique.net/">Forums</a></strong></li>
    <li><a href="http://www.justice.gouv.fr/textfond/dudh1948.htm">Droits&nbsp;de&nbsp;l'homme</a></li>
		<li><a href="http://www.justice.gouv.fr/textfond/enfant.htm">Droits&nbsp;de&nbsp;l'enfant</a></li>
  </ul>

En gros, l'erreur de calcul d'IE sur la largeur du flottant #ddh se produira sur la div vide, et non plus sur #ddh...
Modifié par Laurent Denis (18 Jul 2005 - 07:33)

waow.. ça marche !

Merci Laurent Denis

Je pouvais toujours chercher , mes compétences n'en sont pas encore à décortiquer les bugs CSS d' IE, mais ça vient

il me reste à tester sous IEMac , ce sera fait dans la journée

Merci infiniment ( pour les utilisateurs d'IE )