28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage horizontal des flottants dans ie7

Pages :
Bonjour,
J'ai une structure de mise en page avec des flottants qui fonctionne partout.... sauf sous ie7 !

Le problème vient de ce que ie7 décale les éléments de la deuxième ligne de blocs pour la coller sous le bloc supérieur s'il trouve de la place au lieu de s'aligner sur le bloc de gauche.
2 petits dessins pour illustrer :
upload/37931-exemple1.png
disposition normale

upload/37931-exemple2.png
disposition ie7

Voici le code de l'exemple, il est typique de ce que je génère sur mon site :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
  .cont {
    display: block ;
    width:   500px;
  }
  
    .col {
      display: block ;
      float: left;
      margin-left: 20px;
      width:   200px;
      
      border: 1px solid #777;
    }
    
    .t1 { height: 150px; background-color: #FF0;}
    .t2 { height: 100px; background-color: #FA0;}
    .t3 { height: 150px; background-color: #9FF;}

    .deb {
      clear: left;      
    }
    

  </style>
</head>
<body>
<div class="cont">

<div class="col deb t1">&nbsp;1</div>
<div class="col t2">&nbsp;2</div>


<div class="col deb t3">&nbsp;3</div>
<div class="col t3">&nbsp;4</div>

</div>

</body>
</html>



Bien sûr, sur le site, les css sont dans des fichiers séparés, mais le principe est le même.

Question :
Comment faire pour avoir l'alignement normal sous ie7 uniquement en css, sans astuce javascript ou ajoût de <hr> ou <div> polluantes entre les <div> utiles.

Peut-on mettre cette correction dans des balises conditionnelles IE, ou peut-on écrire pour que ce soit universel ?

Merci à tous d'avance.
Modifié par Paskaracal (27 May 2011 - 10:59)
bonsoir Paskaracal

pourquoi demander de passer un bloc en bloc ?

pourquoi t1 à la classe deb qui fait un clear:left ?

corrige ces deux paramètres je pense dans un premier temps.

à bientot.
Ha ha...
Merci pour ces réponses.
Comme je l'ai dit, il s'agit d'une mise en page, système assez classique dans les frameworks css, réalisé avec des blocs de largeur définie.

@ptitvincent : le clear left est obligatoire pour les blocs de début de ligne, c'est ce qui permet l'équivalent d'un retour au niveau bloc.

Smiley biggrin la marge de 50px : c'est un exemple, sur le site les blocs ont une hauteur dépendant du contenu, donc on ne connaît pas la taille d'un bloc à priori.

Le code test que j'ai mis est facile à tester, il suffit de le copier-coller dans un fichier toto.html il est autonome, pour simplifier la vie d'un gentil contributeur.

Cela peut éviter de conseiller des trucs qui ne fonctionnent pas, c'est comme un défi
Smiley cligne

Merci déjà à ceux qui m'ont répondu... Hélas, ce est pas encore la solution.

Smiley ohwell
Bonjour, jb_gfx a raison mais tu dois aussi enlever le clear... (les display: block sont inutiles en passant).
@Mabelle et jb_gfx,

jb_gfx a écrit :
C'est à la mode les problèmes avec la moitié de l'énoncé en ce moment...


Heu... vous voudriez quoi de plus comme explication ?
J'ai expliqué le problème, mis le code complet d'un test, fait des copies d'écran...

Si ce n'est pas assez clair, demandez.

Pour ce qui est du clear jb_gfx, je l'ai expliqué aussi, si tu avais essayé de les supprimer sur le test tu aurais pu constater que cela ne fonctionnait plus ni avec ie7 ni avec aucun navigateur.

Les display: block sont redondants dans ce cas, parce qu'ils sont dans des classes, donc ils peuvent être appliqués à autre chose que des div.
Dans le cas présent, les virer ne change rien.

Quand à la marge de 50px, je m'en suis expliqué aussi. Si ce n'était que cela, je crois que je n'aurais même pas été capable d'écrire le reste... je suis peut-être débile mais je me soigne Smiley smile

C'est quoi la tactique ? il faut pourrir celui qui pose une question quand on ne peut pas répondre ?
Je suis venu pour trouver de l'aide, je pense l'avoir demandé poliment, et être resté correct. Je n'ai pas de temps à perdre avec des règlements de compte qui ne me concernent pas.
Oula, j'ai cru que ce n'était qu'un échange entre jb_jfx et moi. Il t'a mis sur la piste du margin-bottom et j'ai renchéri en ajoutant la suppression du clear. Maintenant à lui de te donner plus d'explications s'il le souhaite ou de rectifier le tir si j'ai mal compris...

Pour ton information, j'ai testé ton code en enlevant les clear et en ajoutant un margin-bottom à ton bloc 2 et tout fonctionnait que ce soit dans IE7, IE8, FF et Chrome...

Voici le code en question:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <style type="text/css">

  .cont {
   
    width:   500px;
  }
    .col {
      
      float: left;
      margin-left: 20px;
      width:   200px;
      border: 1px solid #777;
    }
    .t1 { height: 150px; background-color: #FF0;}
    .t2 { height: 100px; background-color: #FA0; margin-bottom: 50px;}
    .t3 { height: 150px; background-color: #9FF;}
    .deb {
      clear: left;      
    }
  </style>
</head>

<body>

<div class="cont">
<div class="col t1">&nbsp;1</div>
<div class="col t2">&nbsp;2</div>


<div class="col t3">&nbsp;3</div>
<div class="col t3">&nbsp;4</div>
</div>
</body>
</html>


Pour finir, tu nous as demandé de l'aide sur un code de test, ce que nous t'avons donné. On ne connaît pas les autres détails de ton site et nous ne pouvons pas aller plus loin.
Modifié par Mabelle (19 May 2011 - 23:23)
@Paskaracal

Pour commencer ne prends pas la mouche pour rien, expliques ton problème, si possible par des exemples concrets, de a à z de ce que tu attends (désolé je suis pas devin...).

Il y a une tonne de façon de résoudre ta problématique (ce que j'ai fait) mais si tu n'exposes pas tous les critères on ne pourra pas t'aider.

Edit: comme vient de le dire Mabelle
Modifié par jb_gfx (19 May 2011 - 23:47)
Merci Mabelle pour avoir pris le temps de me répondre,
mais je crois avoir expliqué un peu plus haut que les tailles de bloc sur mon site dépendaient de ce qu'on trouvait dedans, ce sont des blocs de mise en page contenant du texte, ils ne font donc pas 100px et 150px, mais ont une hauteur quelconque.

Le fichier de test que j'ai mis est volontairement simplifié pour se concentrer sur l'essentiel.

Si cela n'avait été qu'une question de marge compensant une taille standardisée, je crois que j'aurais pu trouver tout seul.

Maintenant, pour reprendre le tout début de la question, la disposition de bloc désirée est celle de l'image 1, avec une ligne des blocs 1 et 2 puis une ligne des blocs 3 et 4, alignés à chaque fois sur leur bordure haute.

Dans le test, j'ai mis un bloc conteneur un peu plus grand pour simplifier mais dans le site, il peut faire plus de 900px.
C'est justement la classe .deb qui permet le retour d'un bloc à une nouvelle ligne grâce au clear: left.
C'est hyper classique comme technique.

Ce qui me chagrine, c'est que ie7 bouge verticalement les blocs qui devraient être alignés pour combler les espaces au-dessus, au lieu de garder l'alignement du flux qui devrait rester sur la bordure haute du premier bloc, comme cela doit se passer dans tous les autres navigateurs.

La solution "bourrin" consisterait à placer entre les lignes de blocs un <hr class="TuMeVoisPas"> avec un clear: both dans la classe TuMeVoisPas.

Mais cela m'oblige à truffer le code html de bidouilles destinées à la présentation, et cela juste pour ie7.

La question est : comment faire seulement en css ?

Merci d'avance.
Pour préciser encore plus...
Sans bidouiller les marges puisque les blocs ont une hauteur quelconque, et sans toucher au fonctionnement de base du framework en supprimant les clear.

A titre d'exemple, sans compenser les marges, voilà ce que cela donne si on vire les clear :
upload/37931-Capturede7.png

sur FF et les autres.

Une idée ?
bonjour,

c'est un bug de IE 6/7 . Une solution est d'inserer entre t2 et t3 un élément de type block non flottant en clear;. ou de pas faire flotter le 4eme élément.

Cordialement
Je tiens à préciser @Mabelle que l'idée de supprimer les display:block et les clear venait de moi Smiley cligne tu as sans doute du te tromper de ligne, mais ça n'est pas très grave.

@Paskaracal, pense à retirer le test du margin-bottom : 50px; dans les paramètres du t2.
Pour ton problème, dans l'état du test de ton dernier post, assigne la class deb au 3em bloc :

<div class="cont"> 
<div class="col t1">&nbsp;1</div> 
<div class="col t2">&nbsp;2</div> 
 
 
<div class="col deb t3">&nbsp;3</div> 
<div class="col t3">&nbsp;4</div> 
</div>

Modifié par ptitvincent (20 May 2011 - 09:03)
merci à ptitvincent et cg-nomade,

le margin-bottom ne vient pas de moi, puisque je n'en veux pas pour les raison données plus haut.

Le .deb du premier bloc est effectivement inutile ici mais ne change rien au problème. En fait, dans le site réel chaque 1er bloc doit commencer par un .deb car cette classe contient d'autres initialisation de début de ligne, mais comme je l'ai dit, j'ai donné un code très épuré pour se concentrer uniquement sur le problème.

Merci gc-nomade, c'est la solution que j'utilise actuellement avec un <hr> transformé en bloc non visible avec un clear:both. Mais justement, sur le plan sémantique, cette solution n'est pas conforme car elle m'oblige à ajouter des éléments ne servant qu'à la mise en page dans le flux d'un texte qui devrait en être dépourvu. Surtout que cette modification serait présente partout alors qu'elle ne servirait qu'à ie7... dommage quand même.

Merci à vous deux, mais je cherche toujours une solution 100% css, qui préserve le code html d'intrusions.

On dit partout qu'il faut séparer le contenu de la présentation, ce qui est excellent dans le principe, mais je trouve qu'on en est encore loin avec les css dans l'état actuel des choses, et encore plus bien sûr si on doit rester compatible avec des navigateurs comme ie6 ou7 qui interprètent les normes à leur manière.

Je continue de chercher.........
a écrit :

Surtout que cette modification serait présente partout alors qu'elle ne servirait qu'à ie7... dommage quand même.



<!--[if lte IE 7]><div style="clear:both;"></div><![endif]-->

Modifié par jb_gfx (20 May 2011 - 11:56)
jb_gfx a écrit :

Surtout que cette modification serait présente partout alors qu'elle ne servirait qu'à ie7... dommage quand même.



&lt;!--[if lte IE 7]&gt;&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;&lt;![endif]--&gt;


plusain Smiley smile

@Paskaracal : je n'ai pas le sentiment que tu ai essayé ce que j'ai marqué dans mon dernier post au sujet du 3em bloc Smiley cligne je me trompe ?
Bonjour,(re)

Donc si tu ne peut ou ne veut pas ajouter d'element correcteur, il faut laisser tombé les float et t'orienter vers 
display:inline-bloc;
qui te permet de dimensionner tes element et de les faire passer de lignes en lignes, de la il reste a les aligner sur le baseline.
Pour IE6/7; il te faudra jouer directement sur le "haslayout via les commentaire conditionnel avec le duo classique: 
display:inline;zoom:1;


En gros , plus de clear ni de float en modifiant display sur .col avec un vertical-align:top; + CC pour lte ie 7.

Cordialement, GC
ptitvincent a écrit :



<!--[if lte IE 7]><div style="clear:both"></div><![endif]-->


plusain Smiley smile

@Paskaracal : je n'ai pas le sentiment que tu ai essayé ce que j'ai marqué dans mon dernier post au sujet du 3em bloc Smiley cligne je me trompe ?


@ptitvincent : Au contraire, ptitvincent, ce que tu as marqué est exactement ce que j'avais mis dans le code test (pas celui corrigé par Mabelle). Seule la classe .deb du premier bloc a été supprimée par toi, ce qui ne change rien au niveau du premier bloc.

@jb_gfx et ptitvincent : Le principe de la balise conditionnelle n'est pas bête, mais structurellement parlant, cela revient toujours à ajouter un "intron" entre les blocs html, qui existera, même sous forme de commentaire pour les autres navigateurs.

Cela dit, cela reste conceptuellement plus propre.

Mais cette solution se rapproche de ce que je fais actuellement et que je voudrais éviter.

Pour préciser, et en faire profiter les autres, voici ce que j'utilise dans mon framework perso :


.box-end   { display:  block; height: 0; clear: both; margin: 0;  border: 0; visibility: hidden;}



Cette classe permet de qualifier un élément de séparation à la fin d'une ligne.
Dans le test, cela donnerai :


<div class="col deb t1">&nbsp;1</div>
<div class="col t2">&nbsp;2</div>

<hr class="box-end" />

<div class="col deb t3">&nbsp;3</div>
<div class="col t3">&nbsp;4</div>


Sachant, comme l'a dit ptitvincent, que le deb est inutile pour t1 dans ce cas précis.
le <hr> peut se justifier sémantiquement en cas de séparation entre groupes différents, mais là, je suis obligé de l'utiliser au milieu d'un ensemble de blocs du même type.
C'est ce que j'ai trouvé de moins sale, dans le cas de cet exemple, cela rend même inutile les classes .deb mais elles font d'autres choses dans mon framework complet.

@gc-nomade : cela semble une très bonne solution.
Mais en l'essayant, cela sème le désordre complet ailleurs sur mon site sous ie 6/7, sans doute à cause du "haslayout" qui entraîne beaucoup d'autres perturbations, même si cela répond au test (un crocodile Haribo gagné par gc-nomade Smiley biggrin ).

Merci à tous de votre aide en tout cas...
Je cherche aussi de mon côté, j'ai une indigestion de rectangles de couleur, si je trouve, je vous le fait savoir, si quelqu'un d'autre ici le trouve, il aura droit à tout un paquet de crocos Haribo.
Modifié par Paskaracal (27 May 2011 - 11:01)
Pages :
Sujet clos
Aller à