[Résolu] Pb IE, another... Sous FF, Opéra et Netscape c'est tout bon

Bonsoir,

Je ne sais pas très bien à quoi est dû mon problème, et j'espère que vous y verrez un peu plus clair que moi...
A l'origine tout semble normal pour opéra, firefox et netscape, mais évidemment, IE n'en fait qu'à sa tête !!!
Voici donc le bug : decu

Là, tout est normal, ça passe nickel chrome.
biggrin
édit par Igor: merci d'utiliser l'options vignette pour les images et pour ne pas déformer le forum.

Et là, ben y a plus rien qui marche : mon menu qui a l'origine se trouve bien calé à gauche est carrément décalé sur mon contenu ... fache

édit par Igor: merci d'utiliser l'options vignette pour les images et pour ne pas déformer le forum.

C'est carrément frustrant car à côté, j'ai essayé de faire un code propre et bien construit ... enfin, mon maximum pour que ce soit dans la norme quoi :
validateur XHTML, CSS et même celui vérifiant l'accessibilité biggrin

Voici mes codes :
CSS d'une part

   #navigation {                /* caractéristique du bloc contenant le menu de navigation */                      
  float:left;
  margin-left:0;
  width:176px;
  height:460px;
 }

 .menu {                       /* aspect de la liste menu */
 margin: 0;
 padding: 20px 0 9px 0;        /* permet la définition précise des dimensions  du bloc bleu (marges intérieures) */
 width: 176px;
 background-color:#14265E;
 color: #fff;
 text-indent: 22px;   
 list-style-type: none;        /* pas de puces */
 }

 .rubrique{                    /* définition des caractéristiques de la liste rubrique */
 position:absolute;
 z-index: 2;
 float:right;
 height: 237px;
 margin-left: 0;
 padding: 1px 0 0 0;
 list-style-type: none;
 }

 .rubrique a{
 height: 1.58em;               /* interligne entre les liens */
 text-indent: 22px;
 background-color:#fff;
 color: #555;
 }

 .page {                     /* aspect du texte de la classe page */
 display: block;               /* autorise l'écriture sur deux lignes si le lien dépasse la largeur autorisée */
 height: 1.58em;               /* interligne entre les liens */
 width: 176px;                 /* largeur du rectangle das lequel doivent sécrire les liens */
 background-color:#fff;
 color: #015;
 text-indent: 22px;
 background-image:url(img/puce.gif);
 background-position: left;
 background-repeat: no-repeat;
 }

 #logo a img{                     /* positionnement du logo */
 position:absolute;
 z-index: 1;
 border: none;
 height: 75px;
 width: 176px;
 padding-top:260px;
 background-color:#fff;
 color: #555;
}

 #contenu {
 float:left;                  /* on définit le mode de positionnement par rapport au bloc navigation */
 height:325px;                /* taille du bloc moins la marge interne => IE */
 width:569px;                 /* taille du bloc moins l'épaisseur de la bordure => IE*/
 border-left:5px solid #14265E;
 padding:5px 10px 10px 10px;  /* padding haut, droit, bas, gauche*/ 
 font-size:1.1em;
 }

XTHML d'autre part :

<div id="total"> 
  <div id="bandeau"><img src="../img/cabinet.jpg" alt="L'expérience du terrain" width="594" height="120" /></div>
  <div id="navigation"> 
      <ul class="menu">
        <li><a href="../prestation.htm">PRESTATIONS</a></li>
        <li class="nolien">LA SOCIETE</li>
        <li><a href="../offre.php">OFFRES D'EMPLOI</a></li>
        <li><a href="../cv.php">CURRICULUM VITAE</a></li>
        <li><a href="../contact.htm">CONTACT - PLAN</a></li>
      </ul>
      <ul class="rubrique">
        <li class="page">Historique</li>
        <li><a href="equipe.htm">Equipe</a></li>
        <li><a href="partenaire.htm">Equipe partenaire</a></li>
      </ul>
      <div id="logo"><a href="../accueil.htm" accesskey="1"><img src="../img/logo_css.gif" alt="Retournez à la page d'accueil"/></a></div>
  </div>
  <div id="contenu"> 
    <h2>Le titre </h2>
    <p>Le contenu</p>
  </div>
</div>

Désolée pour le pavé, mais vu que je ne sais pas quoi corrigé, j'ai préféré tout mettre... sweatdrop

Si l'un d'entre vous entrevoit une solution ou un contournement, j'achète !!!
Merci d'avance bawling
Modifié par Cygnus (15 Jan 2006 - 22:52)

bonjour,
Il te suffit d'ajouter pour IE (6, les autres pas tester) un float left; a la 2eme liste pour qu'elle viennent se placée ou elle devrait:

<ul class="rubrique" style="float:left;">

Par exemple, dans la portion de code chargée par Ie.
Bon dev
a plus

<edit>, c'est pas cher du tout ! c'est une affaire
Modifié par gcyrillus (13 Nov 2005 - 23:45)

Merci beaucoup gcyrillus

C'est impecc !