Clear:left non pris en compte dans IE

J'ai des pages avec un petit tableau présentant des miniatures de photos cliquables sur plusieurs pages de mon site.
J'ai décidé d'utiliser des flottans pour donner forme à cette galerie :

.boite {position :absolute;
top:60px;left:15%;
}


div.case {

width:90px;
height:70px;

 
 border-width:0;
  
 border-style:none;
 margin:5px;
   background-color :transparent;
  float:left;
   }
div.casefin {

width:90px;
height:70px;

 
 border-width:0;
 
 border-style:none;
 margin:5px;
   background-color :transparent;
  float:left;
  clear:left;
   } 
     
img {border-width:0;border-style:none;} 

qui est appelé sous html comme ceci :

 <div class="boite">
 
      
            <div class ="case"><a href="pages300/page01cadre.htm"
 target="_parent"><img  alt="" title="Guepier d Europe"
 src="miniatures/01Arc%20200604%20Gu%E9pier%20d%20europe%205.jpg"
     ></a></div>

pour une case normale et comme cela :

 <div class="casefin"><a href="pages300/page03cadre.htm"
 target="_parent"><img  alt="" title="Chouette Cheveche"
 src="miniatures/05Arc%20210604%20chev%E9che%20juvenile%20fenetre%2005%2B250.jpg"
     ></a></div>

pour une case de fin de ligne .
Impeccable pour mozilla firefox et konqueror mais IE aligne les flottants jusqu au bord de la page sans tenir compte du clear:left du style "casefin" .
ça a peut étre qq chose à voir avec le height non specifie du conteneur "boite" ?

Bonjour,

Le problème doit se trouver dans une autre partie de ton code, car celui que tu cites ci-dessus ne pose aucun problème dans IE.

Au passage : pour l'accessibilité, ce sont les attributs alt des images qui doivent absolument être renseignés, pas les attributs title.

et bien si le probléme est dans ce code :
En fait dans div.boite :en effet je ne précise pas la largeur de la boite et que fait internet explorer ?
il met bien mes miniatures float:left, à droite les unes des autres puis arrive la derniére miniature de la ligne avec la propriété "clear:left .
Alors IE l'affiche en dessous des autres tout comme les autres navigateurs .
Et alors me direz vous ?
C'est juste aprés que les choses se corsent :
Alors que les autres navigateurs continuent ainsi sur cette nouvelle "ligne" à afficher les miniatures ,IE ,lui, remet ça sur la 1 ére ligne jusqu 'à atteindre le bord de l'écran (du conteneur parent probablement) !!!
9a donne par exemple :
Navigateur x:
Image 1,2,3,4,5,6,
clearleft: 7,8,9,10,11,12
clearleft:13,14,15,16,17,18
IE:
Image 1,2,3,4,5,6 puis8,9 jusqu au bord
clearleft 7,10,11,12, puis14,15,16,17 jusqu au bord
clearleft 13,18
Enervant non ?
Je vois 2 solutions réciser la largeur du div contenant ,ce qui va m'obliger à écrire des styles différents / nombre d images
ou mettre un clear:right dans l'avant derniere miniature de la ligne ...
Commentaires bien venus.

Bonjour,

Préciser que le problème était visible à partir de la 5e image aurait été judicieux

Cela dit, pour aller au plus simple :
- remplacer cette classe "casefin"par un <div class="spacer">&nbsp;</div> en clear both, inséré toutes les n images
- ou spécifier la largeur du conteneur
- ou utiliser un tableau

a écrit :
<div class="spacer"> </div>

??Excuses moi je ne comprends pas bien que ce soit à mon avis la bonne solution .
> Qu'est-cela ?
D'autre part qui y a t il dans la classe spacer un simple clear:both ???

Mais aprés ton post ça devrait aller,je le sens ....
Merci .
Modifié par yves (28 Nov 2005 - 22:53)

alors la c'est amusant !!!
La chaine de caractéres que je ne comprends pas a disparu de mon post !!!
Quelle est cette formule magique (?je répéte en espaçant ):
> & n b s p ;


Modifié par yves (28 Nov 2005 - 22:54)

C'est un non-breakin space. C'est un espace insécable. Si tu met ce code à la place d'un espace entre deux mots, les mots resterons ensemble (pas de saut de ligne automatique entre les deux mots).

On insére ce non-breakin space dans le div parce qu'un div complètement vide agit différemment qu'un div avec quelque chose dedans même s'il ne s'agit que d'un non-breakin space. De mémoire, il me semble que c'est IE.
Modifié par Tony Monast (28 Nov 2005 - 23:12)