Bug IE float

[Guest teuteu57]

Pour le site que je suis en train de créer, j'ai réalisé une galerie de photos. Pour afficher la liste des miniatures, je les ai placé dans des boites flottantes à gauche. Ceci me permet également de d'être cohérent avec ma mise en page élastique.

Sur Mozilla / Firefox, tout est parfaitement affiché, mais IE me donne un rendu des plus déroutant:

- les images se promènent nimporte où sur la page !!!

- il est impossible de cliquer dessus, elles se sauvent ailleurs !!! .. pas l'idéale pour l'afficher en pleine taille !

J'ai beau chercher la cause de ce bug sur le net, mais je ne trouve rien, et je ne voudrait pas utiliser de tableau.

pour l'instant je reste bloqué ...

!Page visible ici.

voivi le code HTML en question:

<div class="content">
<h3 class="Habillage">Photos Disponibles</h3>

   <div class="FondTexte">

      <div class="DocumentAlbum">
         <a href="document.php3?id_document=1"  Title="Ouvrir ce document" target="document">
            <img src='image1.jpg'  name='image1'  border='0' class='spip_logos' />
            <br/>
            Titre de l'image1
         </a>
      </div>

    
      <div class="DocumentAlbum">
         <a href="document.php3?id_document=2"  Title="Ouvrir ce document" target="document">
            <img src='image2.jpg'  name='image2'  border='0' class='spip_logos' />
            <br/>
            Titre de l'image2
         </a>
      </div>



.... etc. ... (liste des images)



      <hr class="Habillage" />

   </div>
</div>

Voici le CSS en question

.content {
	position:relative;
	width:auto;
	min-width:120px;
	margin:39px 220px 0px 230px;
	z-index:3;
}

.content img{
	position:relative;
	z-index:4;
}

h3.Habillage{
	background-color: #75B8D3;
	font:bold 12px/14px verdana, arial, helvetica, sans-serif;
	position:relative;
	padding-top:0px;
	padding-left:5px;
	padding-bottom:0px;
	top:-13px;
	z-index:4;
	text-align: left;
}

.FondTexte{
	background-color: #5690B5;
	padding:5px;
	padding-top:15px;
	position:relative;
	top:-40px;
	text-align: left;
	z-index:3;
}

.DocumentAlbum{
	float: left;
	width: 120px;
	height: 150px;
	text-align: center;
	margin: 5px 5px 0px 0px;
	border: black 1px dashed;
	font: 9px verdana, arial, helvetica, sans-serif;
}

.spip_logos {}

hr.Habillage{
	display: block;
	visibility: hidden;
	clear: both;
	margin: 0px 0px 0px 0px;
	width: 100%;
/* Ceci est tres mal gere par IE6, la largeur du cadre est mal calculee.
   Le cadre se poursuit jusqu'a l'extremite gauche de l'ecran quand
   on y inclus un align='left', ou style='float:left;'                 */
}

[secondaire] Ce bug est certainement lié à un autre ici commenté dans mon css: dans ma boite "FondTexte", si je place une image avec les atributs align="left" ou style="float:left", et que cette image est plus longue que le texte, le cadre FondTexte s'étend jusqu'à l'extrémité gauche de l'ecran ... (visible ici)

Dites moi ce que vous en pensez. Car pour l'instant je suis perdu

Modifié 3 Octobre 2004 par teuteu57

[ElMoustiko]

Je viens justement il y a peu de faire un petit exemple d'intégration correcte du javascript pour une galerie photo, donc le JS ne t'interessera pas mais le code html que j'ai utilisé, lui devrait !

http://www.elmoustikoblog.net/tutos/js/galerie/index.html

<ul id="galerie_mini">
   <li><a href="..."><img src=".." alt="..." /></a></li>
   <li><a href="..."><img src=".." alt="..." /></a></li>
   <li><a href="..."><img src=".." alt="..." /></a></li>
   <li><a href="..."><img src=".." alt="..." /></a></li>
   <li><a href="..."><img src=".." alt="..." /></a></li>
</ul>

et le code css

  ul#galerie_mini
  {
 	 margin: 0;
 	 padding: 0;
 	 list-style-type: none;
  }
  
  ul#galerie_mini li
  {
 	 float: left;
  }
  
  ul#galerie_mini li a img
  {
 	 margin: 2px 1px;
 	 border: 1px solid #dcb;
  }
  

Voilà, en fait tu met tes images miniatures dans une liste non ordonnée et tu fais flotter les <li>

[Guest teuteu57]

Bon, je crois que ça décoince tout doucement...

Le code HTML n'est pas en couse, car ta solution (ElMoustiko) n'améliore pas la présentation sous IE.

En faisant un autre test, je me rend compte de la chose suivante:

- c'est code CSS suivant qui fait tout dérailler. En effet, si je commente .content img { etc...} les miniatures s'affichent plus ou moins dans la boite, elles ne se "sauvent" pas ... mais elles sont en dessous du coup !

.content{
  position:relative;
  z-index:3;
/* Ceci me permet d'avoir la colonne centrale de contenu
    qui passe au dessus des autres colonnes lorsque la
    largeur de l'écran est trop petite */
  width:auto;
  min-width:120px;
  margin:39px 220px 0px 230px;
}

.content img{
  position:relative;
  z-index:4;
/* Ceci est une rustine qui corrige un problème constaté sur IE:
    les images contenu dans la boite .content sont affichées en
    dessous ! */
}

Modifié 3 Octobre 2004 par teuteu57

[Gribouille26]

Salut,

Je n'ai pas vraiment la solution à ton pb, mais je vais te donner un conseil qu'on m'a donné maintes fois et qui m'a bien arrangé le jour où je me suis décidée à le suivre!!

Le position:relative, faut pas en mettre partout!

Voilà. Bon courage!!