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

(reprise du message précédent)

ptitvincent a écrit :

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

plusain

@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 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 ).

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)

Re,

En effet le haslayout peut-etre perturbant.
Avec une page reprenant le contexte de l'original avec un contenu et des image lorem, il nous serait plus facile de visualiser les effet de bords. Il y a probablement d'autre flottant genant dans la page ou des marges appliquées differement. C'est peut-etre rien (haslayout sur .cont pour reduire les effet de bord possible au conteneur ou autre simple correction a ces farcetieux Ies )

Cordialement

GC

Bon, après beaucoup d'essais, il semble qu'il n'y ai pas de solution.

GC était le plus proche avec la gestion des blocs en inline mais cela ne fonctionne pas bien dans d'autres cas, cela m'oblige à réécrire mes frameworks css qui fonctionnent bien et simplement en dehors de ce problème particulier, et faire des modifications dans toutes les pages HTML déjà produites.

Dommage, je vais rester au hr ou au br avec une classe pour rendre la balise invisible.

Pour aider les autres en retour du temps que vous m'avez accordé, voici la classe .clear que j'utilise :

.clear { clear: both; }
 br.clear { margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px; }
 hr.clear { display:  block; margin: 0; border: 0; visibility: hidden; height:12px; }

Le défaut du <hr class="clear" /> est qu'en ie, on a une hauteur difficilement réductible à 0. C'est pour cela que je l'utilise avec une hauteur de 12px qui permet un espacement standard dans ma typo.

Le <br class="clear" /> fonctionne parfaitement bien et reste malgré tout assez "sémantique".

Mais cela me fait mal quelque part d'être obligé de rajouter ce genre d'artifice pour une compatibilité avec un navigateur qui refuse les standards.

Ces classes clear m'ont été inspirées par d'autres utilisateurs de css sur le net, avant cela, j'utilisais une div vide qui fonctionnait bien ( dans le même genre que celle de ptitvincent) mais me gênait vis à vis de la sémantique HTML.

Cela dit, même avec css3, on reste très très loin de l'idéal de séparation du contenu et de la présentation puisqu'on est obligé de truffer le html de divs et leurs classes spécifiques. Sauf si on veut rester simples et éloignés d'un beau rendu typographique.

Merci à tous.
Modifié par Paskaracal (27 May 2011 - 11:03)

Paskaracal a écrit :

Ces classes clear m'ont été inspirées par d'autres utilisateurs de css sur le net, avant cela, j'utilisais une div vide qui fonctionnait bien ( dans le même genre que celle de ptitvincent) mais me gênait vis à vis de la sémantique HTML.

Faudra m'expliquer la valeur sémantique d'un div...

jb_gfx a écrit :

Faudra m'expliquer la valeur sémantique d'un div...

Justement, il n'y en a pas... ou plus exactement, le div devrait créer des divisions thématiques dans un texte.

Il y a bien longtemps qu'on ne l'utilise plus comme ça.

J'ai des applications avec des bases de textes structurés en chapitres et plans, qui doivent être transformés en HTML et présentés de façon la plus "belle" possible.
Sans retravail manuel des balises, le résultat est très moyen.

Paskaracal a écrit :


Justement, il n'y en a pas... ou plus exactement, le div devrait créer des divisions thématiques dans un texte.

Il y a bien longtemps qu'on ne l'utilise plus comme ça.

Je sais pas d'où tu sorts cette définition.

W3C a écrit :

The div element is a generic container for flow content that by itself does not represent anything.

Modifié par jb_gfx (27 May 2011 - 10:48)

jb_gfx a écrit :

Je sais pas d'où tu sorts cette définition.

Peut-être là : W3C : HTML 3.2 Reference

DIV elements can be used to structure HTML documents as a hierarchy of divisions...

Il y a bien longtemps ai-je écrit... Dans une galaxie lointaine...