[Résolu] Float ignoré par IE7?

Bonjour!

Et un premier message sur ce forum, que j'ai pourtant abondemment fréquenté à chaque site réalisé, sans jamais avoir besoin de poser une question à laquelle je n'avais pas trouvé de réponse…

C'est un problème de décalage spécifique à IE7 qui m'amène chez vous aujourd'hui. Ça se passe par ici. J'ai exactement ce que je souhaite avec Safari Mac/PC, Firefox 2 et 3 Mac/PC et IE6 (avec une feuille de style spécifique minimale). A l'heure où j'écris, ce site est en production depuis quelques semaines parce que ce problème était passé inaperçu: j'ai été dilettante et très optimiste en ayant la flemme de configurer une machine virtuelle sur mon Mac juste pour lancer IE7 (ma grande faute!), et mes « clients » ont tous des Mac ou des vieux pécés.

Mes pages sont en xHTML 1.0 transitional, et ont la structure suivante:

<div id="conteneur">
   <div id="entete">
      Titre et en-tête…
   </div>
   
   <div id="nav_haut">
      <ul id="sections">
         Barre de navigation principale (horizontale)…
      </ul>
   </div>
   
   <div id="nav_vert">
      Barre de navigation secondaire (verticale)
   </div>

   <div id="contenu_ext">
   <div id="contenu_int">
      Bloc principal de contenu…
   </div>
   </div>

   <div id="pied">
      Pied de page…
   </div>
</div>

Mon bloc principal de contenu (#contenu_int) est imbriqué dans un bloc vide (#contenu_ext) qui n'est là que pour servir de support à une image de fond pour la déco. Ce sont les métalleux qui ont insisté pour avoir ces dessins tribaux! Mais ce bloc externe reste a priori positionné correctement; c'est le bloc interne qui se décale de 140px sur la droite.
Ces éléments sont stylés de la manière suivante:

#nav_vert{
   margin: 200px 0 0 10px;
   padding: 0;
   width: 110px;
   font-size: .8em;
   float: left;
}

#contenu_ext{
   margin: 0 20px 0 0;
   padding: 0;
   background: url("../images/tribalhaut.png") no-repeat top;
}

#contenu_int{
   margin: 0;
   padding: 20px 30px 20px 150px;
   min-height: 400px;
   background: url("../images/tribalbas.png") no-repeat bottom;
   font-size: .8em;
}

On dirait donc que sous IE7 mon bloc #contenu_int ne supporte pas d'être superposé à la barre de navigation verticale (#nav_vert), qui est pourtant flottante, et fiche le camp à droite pour trouver de la place.

Voilà… pas sûr d'avoir été clair. Et en espérant que l'un ou l'autre d'entre vous puisse me suggérer une piste de réflexion!

PS: je laisse aujourd'hui (4 septembre) des bordures colorées dans la feuille de style spécifique à IE7 pour aider à cerner le truc… C'est pas beau, mais vachement utile!
Modifié par superpantoufle (06 Sep 2008 - 17:56)

bonsoir

comme tu as bien repéré le defaut , peut-etre peut tu essayer de reduire ta liste verticale a une largeur de zero a l'aide de marges négatives :

#nav_vert{

   margin: 200px 0 0 10px;

   padding: 0;

   width: 110px;

   font-size: .8em;

   float: left;
margin-right:-120px; /* largeur + marge , reduit virtuellement a zero l'espace requis par ce conteneur */

}

test ensuite avec un ou deux liens bidons , histoire de verifié qu'il reste cliquable.

++

Bonsoir,

Une bêtise vue dans le code HTML de la page:

<!--[if IE]><style type="text/css"> img { behavior: url(external/png-opacity.htc); } body { behavior: url(external/csshover.htc); }</style><![ endif ]-->

Vu qu'IE7 amène le support de la transparence PNG (PNG-24) et un support très correct de la pseudo-classe CSS :hover, appliquer ce correctif à toutes les versions d'Internet Explorer est une bêtise. Je ne parle même pas d'IE8...

Attention à bien maitriser le champ d'application de vos correctifs pour tel ou tel navigateur!

re7 a écrit :
bonsoir

comme tu as bien repéré le defaut , peut-etre peut tu essayer de reduire ta liste verticale a une largeur de zero a l'aide de marges négatives

test ensuite avec un ou deux liens bidons , histoire de verifié qu'il reste cliquable.

Merci pour cette piste intéressante! Mais malheureusement, comme tu pensais le redouter, les liens ne sont plus cliquables. Mais l'affichage est bon…
Mais comme le but de cette barre verticale est justement l'affichage de ces liens, ça ne me le fait pas des masses…

Florent V. a écrit :
Une bêtise vue dans le code HTML de la page:

Ah ben ouais, carrément.
Mais elle n'est pas de moi et je n'y vais jamais pris garde: cette ligne fait partie des meta-tags générés automatiquement par ExponentCMS. Je vais leur envoyer un rapport de bug, il suffirait qu'ils limitent ce commentaire aux versions précédent IE7!

Bon du coup, ma question reste ouverte, si quelqu'un a une autre piste à explorer… Merci!

Solution temporairement efficace: j'ai positionné ma barre de navigation secondaire en absolu, et elle me fiche la paix pour l'instant…
Sujet résolu pour l'instant, je reviendrai vous trouver en cas de besoin! Merci!