[résolu] PB sous IE, li s'affichant à l'extérieur de ul

Question

FoW

3 Jul 2006 à 17:06

Bonjour,

Après plusieurs heures de pétage de plombs et une recherche infructueuse sur le forum je me décide enfin à poster.

Un petit screen et toujours plus parlant qu'un long discour :

http://img448.imageshack.us/img448/6599/exemple4he.jpg

Le lien se décale si l'image repousse le bloc : control plus bas que le texte.
Bien sur aucun problème sur FF.

Le code html :


<div class="grey">
  <h3>
    <a name="cockpit">
      cockpit
    </a>
  </h3>
  
  <a href="./index.php?contenu=garage&amp;type=cockpit&amp;id=7#cockpit">
    <img src="./images/cockpit/cockpit.jpg" alt="cockpit" />
  </a>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Prix d'achat
  </div>
  <div class="corpse">
    150000
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Prix de vente
  </div>
  <div class="corpse">
    50000
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Navigation
  </div>
  <div class="corpse">
    2
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Calculateur
  </div>
  <div class="corpse">
    4
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Confort
  </div>
  <div class="corpse">
    9
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Etat
  </div>
  <div class="corpse">
    0
  </div><div class="head">
    <span class="label">
      &nbsp;
    </span>
    Réparation
  </div>
  <div class="corpse">
    6000
  </div>

  <div class="control">
    <ul>
      <li class="box">
        <a href="index.php?contenu=magasin&amp;type=cockpit">
          Changer
        </a>
      </li>
      <li class="read">
        <a href="index.php?contenu=garage&amp;action=repare&amp;type=cockpit&amp;id=7#cockpit">
          Réparer
        </a>
      </li>
    </ul>
  </div>

</div>

<div class="grey">
  <h3>
    <a name="navigation">
      navigation 
    </a>
  </h3>
  
  <a href="./index.php?contenu=garage&amp;type=navigation&amp;id=2#navigation">
    <img src="./images/plugcockpit/navigation.jpg" alt="navigation" />
  </a>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Prix d'achat
  </div>
  <div class="corpse">
    17600
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Prix de vente
  </div>
  <div class="corpse">
    7040
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Valeur
  </div>
  <div class="corpse">
    4
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Etat
  </div>
  <div class="corpse">
    0
  </div>

  <div class="head">
    <span class="label">
      &nbsp;
    </span>
    Réparation
  </div>
  <div class="corpse">
    0
  </div>

  <div class="control">
    <ul>
      <li class="box">
        <a href="index.php?contenu=magasin&amp;type=navigation">
          Changer
        </a>
      </li>
    </ul>
  </div>

</div>

la css


* { font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;}

body
  {
  background-color: #000;
  color: #eef;
  }

#principal, #entete
  {
  border: none;
  margin: 0;
  padding: 0;
  }

#entete h1
  {
  background-image: url('../images/interface/hm_anim.gif');
  background-repeat: no-repeat;
  height: 100px;
  text-align: center;
  margin: 0;
  padding: 1em 1em 1em 6em;
  }

/* menu */
#menu
  {
  position: fixed;
  top: 175px;
  left: 0px;
  border: none;
  width: 140px;
  height: 100%;
  margin: 0;
  padding: 0;
  }

#menu ul
  {
  list-style-type: none;
  margin: 1em;
  padding: 0;
  }

#menu li
  {
  border : none;
  margin: 0;
  padding: 0.2em 0.5em;
  }

#menu a
  {
  border: none;
  display: block;
  background-color: #000;
  color: #eef;
  font-weight: bold;
  font-size: 0.7em;
  text-decoration: none;
  text-align: left;
  margin: 0;
  padding: 0;
  }

#menu form
  {
  border: none;
  padding: 0;
  margin: 0;
  }

#menu input
  {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.7em;
  }

#menu label
  {
  border: none;
  background-color: #000;
  display: block;
  color: #eef;
  font-weight: bold;
  font-size: 0.7em;
  }
/* /menu */
/* contenu */

#contenu
  {
  border: none;
  text-align: left;
  margin: 0 0 0 140px;
  padding: 0;
  }

#contenu h2, #contenu h3
  {
  font-size: 1.2em;
  border-bottom: double 3px #ccc;
  padding: 0.5em 1em;
  margin: 0 0 1em 0;
  background-color: #222;
  color: #eef;
  width: 569px;
  }

#contenu h3
  {
  font-size: 1em;
  width: 574px;
  }

#contenu span.statut
  {
  color: #999;
  }

#contenu p
  {
  margin: 2em 5em;
  }

#contenu a
  {
  color: #eef;
  text-decoration: none;
  }

  /* form */
#contenu form
  {
  margin: 1em;
  padding: 1em 0;
  }

#contenu form ul
  {
  margin: 0;
  padding: 0;
  }

#contenu form ul li
  {
  list-style-type: none;
  padding: 0;
  }

#contenu form ul li label
  {
  display: block;
  text-align: right;
  padding-right: 1em;
  float: left;
  width: 13em;
  }

#contenu form ul li .bouton
  {
  margin: 1em 0 0 14em;
  }
  /* /form */
  /* grey */

.grey
  {
  font-size: 0.8em;
  background-color: #666;
  background-image: url('../images/interface/head.jpg');
  background-position: left;
  background-repeat: repeat-y;
  margin: 2em 0.5em;
  padding: 0;
  width: 600px;
  }

.grey .label
  {
  display: block;
  font-style: italic;
  color: #ccc;
  text-align: right;
  width: 2em;
  height: 0.9em;
  margin: 0;
  padding: 0 0.5em 0 0;
  float: left;
  clear: left;
  }

.grey .label a
  {
  color: #ccc;
  }

.grey .head
  {
  width: 148px;
  margin-bottom: 0.5em;
  }

.grey .corpse
  {
  margin: -1.8em 0 0 175px;
  padding-bottom: 1em;
  }

.grey .corpse .unread
  {
  font-weight: bold;
  }

.grey .text
  {
  margin: -5.5em 1.5em 1em 175px;
  min-height: 5em;
  }

.grey form
  {
  margin: 0;
  }

.grey form input
  {
  margin: 0em 5em 1em 130px;
  }

.grey form select
  {
  margin: 0em 8em 1em 130px;
  }

.grey form textarea
  {
  margin: -0.5em 0 1em 160px;
  width: 395px;
  }

.grey form .bouton
  {
  margin-left: 160px;
  }

.grey img
  {
  display: inline;
  border: none;
  float: right;
  clear: right;
  margin: 0 1em 1em 1em;
  }
    /*control*/
.control
  {
  border-top: double 3px #ccc;
  background-color: #222;
  clear: both;
  font-size: 0.8em;
  }

.control ul
  {
  background-color: #00f;
  border: solid 1px #f00;
  clear: both;
  margin: 0;
  padding: 0.5em 0;
  }

.control ul li
  {
  background-color: #d00;
  border: solid 1px #0f0;
  list-style-type: none;
  display: inline;
  margin: 1em;
  }
    /* /control*/
  /* /grey */
  /* pied */
#pied
  {
  display: none;
  background-color: #222;
  color: #666;
  font-size: 0.7em;
  text-align: center;
  clear: both;
  margin: 0;
  padding: 0;
  height: 1.2em;
  }

#pied a
  {
  color: #444;
  }

  /* /pied */
/* / contenu */

D'avance merci.

Si vous remarquez d'autres problèmes dans ma css (comme par exemple le fait que je n'utilise pas la class .box du li en question Smiley ohwell

) n'hésitez pas à m'en faire la remarque.

Les remarques constructives sont toujours les bien venues.
Modifié par FoW (03 Jul 2006 - 17:30)

dhjapan

3 Jul 2006 à 17:24

Salut,
je crois que c'est le display:inline; sur tes .control ul li qui foire tout.
essay ca :

.control ul {background-color: #00f;border: solid 1px #f00;clear: both;margin: 0;padding: 0.5em 0; /*!*/ height: 20px; /*!*/}
.control ul li {background-color: #d00;border: solid 1px #0f0;list-style-type: none; /* display: inline; ! */ float: left; margin: 0 1em;}

le principe c'est d'utiliser un float:left à la place du display:inline aux li .. du coup tu dois imposer un height:20px à l'ul

FoW

3 Jul 2006 à 17:29

Merci ça a fonctionné impécable, J'avais bien essayé avec des float left mais sans utiliser tous les hacks pour masquer tout ça aux bons navigateurs.

Merci.

Sujet clos