[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

CSS et mise en forme, CSS3

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