28173 sujets

CSS et mise en forme, CSS3

Bloc float left IE et dernier mot redondant sortant du bloc

Bonjour,

J'ai un petit soucis bizarre ...
J'ai un bloc flottant calé sous d'autres de la même taille.
Il contient des liens.

Sous Firefox tout est ok mais sur IE, tout est calé mais le dernier mot du bloc est redondant et situé hors du bloc !!!

Sous firefox:
http://img528.imageshack.us/img528/3636/blocfirefox7xj.gif

Sous IE:
http://img528.imageshack.us/img528/6200/blocie6gx.gif

Le dernier mot "clio III" est bon mais le mot "io III" (qui vient de la fin du précédent) se place dessous.

Le code :

#bloc_autres_modeles
{   
  float:left;
  width:643px;
  min-height:30px;
  height:auto !important;
  height:30px;
  background-color:#FFF;
  border:1px solid #ccc;
  margin:5px 0px;
  padding:0px;
  text-align:center;
}

#bloc_autres_modeles a
{
   margin:2px;
   padding:0px;
   float:left;
}


Si j'enlève le floatr left du bloc_autres_modeles tout rentre dans l'ordre mais le margin top de ce même bloc ne prend pas effet sous firefox.

Si qq a déjà eu ce problème ...

Bye
Seb
Ah ouais c'est vraiment bizarre Smiley ohwell
Ca pourrait peut etre se regler avec un overflow:hidden si t'as pas déjà essayé
Modifié par Resh (09 Dec 2005 - 17:01)
Salut
Tu n'as pas tout simplement un bout de code qui traîne hors de ton conteneur ou de ton body, ou carrément du html ?
Modérateur
bonjour,
as tu un lien vers la page complete, ou ce morceau de code suffit a mettre le bug en evidence ?
a plus
Ça y est, j'ai trouvé. Le dernier bug Renault ! CQFD Smiley biggol
Blague à part, il sert à quoi le float left ? Pour l'instant on dirait que le flux n'est pas modifié. C'est vrai que l'exemple en ligne serait un plus à comprendre le phénomène.
Salut,

Merci ! j'ai pas mal à apprendre du topic donné (y compris sur la taille du texte fixe ...)

C'est vrai que si je réduis la taille du bloc, le duplicata disparait ! mais normalement y'a la place pile (c'est mathématique Smiley smile )

Je ne peux malheureusement pas mettre la page en ligne, je l'ai en local et je dois tout mettre en place chez l'hébergeur, BD etc ...)

Si je mets pas le float left, ça règle le pb sur IE, mais FF ne me prend plus la hauteur du bloc et je perds le background-color comme sur l'image précédente !

Je continue mes recherches, merci beaucoup de m'éclairer !!!

@+
Seb
Modérateur
seb a écrit :
mais normalement y'a la place pile (c'est mathématique Smiley smile )


La place pile, selon chaque navigateur ? N'oublis pas que Microsoft à sa propre méthode pour calculer la largeur des boîtes.

Si le problème ne vient pas de là, ca ne coûte rien de laisser un peu de corde et de juste réduire, ne serait-ce qu'un tantinet, la largeur de chaque bloc. Smiley smile
Modifié par Tony Monast (09 Dec 2005 - 21:44)
Salut,

Ca y est, j'ai mis une version html ici : http://www.autopromo.com/automillesime/index.html , ne tenez pas compte des adresses des images pas ok, c'est prévu pour être à la racine !

Les blocs du dessus sont bien calés sous IE avec 643px de large mais le dernier ne veut pas ...

A 640px, ça passe mais bon, si ça peut être pile, je serais plus satisfait !!!

Bye
Seb

PS : le bloc en question : #bloc_autres_modeles dans la feuille de style fiche_produit.css
Modifié par seb (09 Dec 2005 - 22:11)
Hors-sujet : tes menus se ferment pas si on en sort par le bas. Sinon les deux cases à cocher appartiennent au formulaire de droite ? Parce que là on a du mal à comprendre le système de validation.
Sinon pourquoi cherches-tu à être pile pile ? 3 pixels dans la vie d'un homme alors que de toute manière tu es tributaire du navigateur du visiteur...
//edit : ah ok il y a une pub.
Modifié par globy (09 Dec 2005 - 22:15)
Re,

Oui il y a bien une pub à droite.
Quant au formulaire, demande à ce *** de graphiste pourquoi il l'a disposé comme ça ! Smiley langue

C'est sûr 3 pixels c'est pas grand chose mais j'aimerai quand même comprendre !

Par contre, pourquoi si on enlève le float left, ça passe sous IE à 643px ?

Bye
Seb
Je m'auto réponds Smiley langue

J'ai une solution mais un peu de bricolage :

#bloc_autres_modeles
{   
  width:643px;
  min-height:30px;
  height:auto !important;
  height:30px;
  background-color:#FFF;
  border:1px solid #ccc;
  margin:5px 0px;
  padding:0px;
}
html>body #bloc_autres_modeles
{   
  float:left;
}


Mais ça ne m'explique pas la cause !

Bye
Seb
seb a écrit :
C'est sûr 3 pixels c'est pas grand chose mais j'aimerai quand même comprendre !

Pour l'explication je suis preneur également. Le lien que je t'ai donné n'a rien à voir, ils parlent en %.
edit : si tu as 5 min Smiley confused
C'est la demi-finale starac, il n'y a pas grand monde ce soir sur le forum Smiley biggol
Modifié par globy (09 Dec 2005 - 23:27)
Sujet clos
Aller à