28173 sujets

CSS et mise en forme, CSS3

Float, recommandations et rendu des différents navigateurs

Bonjour.

Je coince en ce moment sur une question existentielle, à savoir : cette page d'exemple sur la propriété float.

En effet, selon les recommandations CSS 2.1, l'image (le flottant) devrait être poussée à gauche de la boîte de ligne à laquelle elle appartient, à savoir la seconde, d'après ce qui s'affiche.

Or, Internet Explorer Et Firefox assignent le flottant sur la troisième boîte de ligne. Par contre Opera semble avoir un rendu correct du flottement de l'image.

Est-ce un bug commun de Firefox et IE, ou est-ce que quelque chose m'échappe ?
D'après moi, c'est plutôt Opera qui respecte CSS 2.1, mais je m'en remets à votre avis. J'avoue ne pas comprendre la subtilité et ne rien avoir trouvé sur ce sujet nulle part.

Merci d'avance pour votre aide. Smiley smile
Modifié par an.archi (22 Apr 2006 - 22:14)
Administrateur
an.archi a écrit :
Hors, Internet Explorer Et Firefox assignent le flottant sur la troisième boîte de ligne. Par contre Opera semble avoir un rendu correct du flottement de l'image.

Je viens de tester tes pages sur IE6 et FF.
L'image flottante apparait bien dans le deuxième bloc, exactement là où elle est censée se placer.

Rappel du Positionnement Flottant :
a écrit :
* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


Il y'a évidemment une histoire de débordement de flottant dans ton exemple.

PS : "Hors"/"or" Smiley cligne

upload/1-float.gif
Raphaël, merci pour ta réponse très rapide ; je ne parle malheureusement pas de bloc, mais de boîte de ligne.

Le bloc est le paragraphe, les boîtes de ligne constituent le rendu du contenu dans le bloc. Smiley smile
En l'occurence, le flottant apparaît dans la troisième boîte de ligne, et pas dans la deuxième. As tu testé avec Opera pour voir de quoi je parle ?

Si besoin est, je peux faire des captures d'écran, pas de problème.

Merci pour or/hors, cela dit. Smiley cligne

pour info :
* La boîte de ligne
* Les flottants
a écrit :
A float is a box that is shifted to the left or right on the current line.


<playonwords>Haha, sinon, je ne sais pas si sémantiquement, ce que je vais écrire tient la route, mais PS, ça doit pas venir après une signature, normalement ? ;p
La colonne du tableau où le pseudo s'affiche est-il considéré comme une signature ? Smiley smile </playonwords>

Au temps pour moi, mon dictionnaire de latin et l'article sur wikipedia sont unanymes : Scriptum n'est pas la signature, mais l'écrit.
Modifié par an.archi (22 Apr 2006 - 22:36)
Après différents tests, il semblerait que KHTML se range dans le camp de Firefox et IE, alors qu'Amaya choisit Opera comme partenaire...

Ce suspens est insoutenable...
Modifié par an.archi (22 Apr 2006 - 23:33)
an.archi a écrit :
Raphaël, merci pour ta réponse très rapide ; je ne parle malheureusement pas de bloc, mais de boîte de ligne.

Le bloc est le paragraphe, les boîtes de ligne constituent le rendu du contenu dans le bloc. Smiley smile

Je ne veux pas être méchant, mais « boîte de ligne » ça ne veut pas dire grand chose… [EDIT : bon, là je dis une connerie, en fait le concept de « boîte de ligne » est clairement défini… et le reste de ce message n'a donc pas un grand intérêt.] En HTML/CSS on a des éléments de type bloc, et des éléments de type en-ligne. Mais je n'ai pas l'impression que tu parles de ça.
Enfin bref, tu utilises un vocabulaire non standard et tu te comprends, mais il semblerait que tu sois le seul à savoir ce que « boîte de ligne » peut bien signifier. Si tu parles de tes paragraphes auxquels tu as donné une largeur fixe, un padding (retrait intérieur) et une fine bordure noire, effectivement on a un effet graphique de « boîte », mais ça reste tout de même des paragraphes (éléments p).

an.archi a écrit :
En l'occurence, le flottant apparaît dans la troisième boîte de ligne, et pas dans la deuxième.

Que veut dire « apparaît » ? Qu'il empiète sur le troisième paragraphe, qu'il commence dans le troisième paragraphe ?

Comme disait Raphaël, le comportement que tu observes est tout à fait normal. Et je ne vois pas trop la différence entre le rendu de Firefox et celui d'Opera, mis à part une légère différence dans la position initiale (bord haut) de l'élément flottant. Différence qui tient à la présence d'un passage à la ligne ou non du flottant par rapport à son point d'insertion dans le flux (l'endroit où l'élément flottant est placé dans le texte, au niveau du code).

En fait, le seul "problème" que je vois, c'est une histoire d'élément flottant qui sort des limites de son élément parent (ici, le deuxième paragraphe, qui ne vient pas contenir son enfant flottant).
Sur cette question, cf :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
(explications détaillées bien comme il faut).
Modifié par mpop (23 Apr 2006 - 02:36)
an.archi a écrit :
mpop > Regarde mieux. Smiley smile

J'avais déjà bien regardé, et c'est une différence cosmétique. Ça n'implique pas une véritable différence de rendu entre Firefox et Opera.

Alors oui, il y a une petite différence visuelle. Mais le principe appliqué reste le même, et les applications, sans être identiques au pixel près, reposent sur le même principe. Circulez, rien à voir.
Modérateur
bonjour,

tes screen , ne semble pas correspondre pour IE,
qui englobe automatiquement les flottant dans leur conteneurs, ou qui etire le conteneur afin d'englober le "flottant".

Cherche tu a ce que tout les navigateurs etire et englobe visuellement le "paragraphe/zone de texte " qui la contient ?

si c'est le cas , sans donné de dimension de hauteur , le "overflow:hidden;" appliquer a p est en passe de devenir un classique pour obtenir cet effet.


			p {
				width: 350px;
				padding: 1em;
				border: solid 1px #000;
                                overflow:hidden; /*  c'est ça que tu recherche ? ou que tu ne comprends pas ?*/
			}
			#enfant-2 img {
				float: left;
				margin-right: 1em;
				margin-top: 5px;
				border: solid 5px #aaa;
			}


++
mpop > inutile d'être désagréable.
En gros, je pourrais te répondre RTFM, ou en français si tu as du mal à traduire.
Tu constateras que je ne suis pas le seul à me comprendre. prends soin de lire les liens qu'on te propose avant de juger à l'emporte-pièce, s'il te plaît.
Merci. Smiley ohwell

Ça n'a rien de cosmétique, les rendus sont différents selon les navigateurs, et à moins que tu n'aies une réponse pertinente, je crois que tu ne fais malheureusement pas beaucoup avancer le schmilblik. Le flottant se trouve sur la ligne de boîte inférieure (l'image étant située avant "Nous").

Je ne cherche pas à savoir si le comportement est normal, mais lequel des deux semble normal. Selon les Specs, l'élément flottant est censé être poussé contre son conteneur sur la ligne de boîte courante. Or (!!!), ce n'est pas le cas pour Firefox, IE, ou les navigateurs basés sur KHTML (Je n'ai pas pu voir ce rendu, mais on m'a dit qu'il était identique).

Donc si tu as un avis sur la question, je suis preneur, bien évidemment. Smiley smile
Modifié par an.archi (23 Apr 2006 - 02:15)
gcyrillus > Je ne cherche pas à faire en sorte que mon paragraphe englobe mon image, ce n'est pas le but du sujet.

Effectivement, le screen a été pris sous FF, mais ce que je veux montrer est similaire avec IE, malgré le fait qu'il ne respecte pas correctement les specs et qu'il étire le paragraphe jusqu'à contenir le flottant.

Merci quand même. Smiley smile

Je répète, je ne cherche pas de solution visuelle, je cherche à comprendre quels navigateurs respectent les specs concernant le positionnement du flottant par rapport à la boîte de ligne courante.

Doit-il être poussé sur la troisième ligne comme le font FF, IE et d'autres, ou doit-il rester sur la deuxième, comme on est en droit de l'attendre si l'on consulte les specs ?
an.archi a écrit :
mpop > inutile d'être désagréable.
En gros, je pourrais te répondre RTFM, ou en français si tu as du mal à traduire.
Tu constateras que je ne suis pas le seul à me comprendre. prends soin de lire les liens qu'on te propose avant de juger à l'emporte-pièce, s'il te plaît.
Merci. Smiley ohwell

Effectivement, my mistake sur toute la ligne.
J'avais lu trop vite ton deuxième message ou pourtant tu expliques (rapidement mais en donnant les références) le concept de boîte de ligne. Comme j'ai l'habitude de voir passer sur ce forum des gens qui utilisent leur propre vocabulaire plutôt que les termes techniques standards, j'ai pensé trop vite que c'était ton cas.

Désolé si je t'ai semblé désagréable.

an.archi a écrit :
Ça n'a rien de cosmétique, les rendus sont différents selon les navigateurs, et à moins que tu n'aies une réponse pertinente, je crois que tu ne fais malheureusement pas beaucoup avancer le schmilblik. Le flottant se trouve sur la ligne de boîte inférieure (l'image étant située avant "Nous").

Je ne cherche pas à savoir si le comportement est normal, mais lequel des deux semble normal. Selon les Specs, l'élément flottant est censé être poussé contre son conteneur sur la ligne de boîte courante. Or (!!!), ce n'est pas le cas pour Firefox, IE, ou les navigateurs basés sur KHTML (Je n'ai pas pu voir ce rendu, mais on m'a dit qu'il était identique).

Donc si tu as un avis sur la question, je suis preneur, bien évidemment. Smiley smile

Mon avis sur la question est que :
– c'est un cas typique de flottement dans l'intégration de points de détails des specifications ;
– c'est effectivement une différence de rendu, mais elle est loin d'être essentielle… ce que j'appelle une différence cosmétique (on pourrait dire "mineure", si le terme "cosmétique" dérange) ;
– les cas où cela poserait un problème risquent d'être assez peu nombreux… à moins de vouloir faire du design "au pixel près".

Je veux dire par là que s'il est intéressant de constater une différence (qu'on la labellise "différence d'interprétation" ou "erreur d'intégration de la spécification"… ce qui dépendra de la précision sur ce point des spécifications), et pourquoi pas de répertorier les comportements des divers navigateurs… les applications pratiques de ce constat risquent d'être fort limitées, non ?
Enfin, ça m'a fait découvrir le concept de « boîte de ligne », et je me coucherai moins bête ce soir Smiley biggrin
Modérateur
Je comprends mieux ta question,

le flottant, devrait passer a la ligne juste derriere le mot ou l'image se trouve, ensuite , le texte (restant en ligne/inline) devrait poursuivre son chemin, c'est a dire occupé l'espace encore libre , jusqu'a glissé sous l'element flottant.

Et la effectivement 2 rendus possible, l'image se degage a la ligne suivante et le texte reste la, ou plus logique peut-etre par rapport au flux ?! , le texte continue sa route juste aprés l'image en sautant une ligne avec elle Smiley smile .

et voila un 3 eme rendu avec opera qui place cette image en debut de ligne en repoussant le texte avant elle dans le flux apres elle dans le visuel.

bref, surprenant, mais sans plus, les elements de formulaires ont eux aussi des comportement bien differents , les listes aussi, chaque navigateur ira interpreter a sa façon en estimant que tel façon de faire est plus "jolie" ou "logique" ou ? .
J'ai recemment mis a jour firefoxe, et je decouvre deja pas mal de difference d'affichage avec les versions prececedentes ....

Je pense que tu n'auras pas vraiment de reponse satisfaisantes ...

<hors sujet>as tu essayer les clear, avec 3 flottants, en mettant le 2eme flottant en clear ?, la , il y a un bug franc avec opera7.54 et ie6 .</hs>

++
mpop > Tout va bien. Je comprends bien la réaction qui consiste à "aller vite pour résoudre des questions trop fréquemment posées". Reste que quand on est dans la position du demandeur, ce genre d'attitude ne met pas forcément de bonne humeur. Smiley cligne
La "désagréabilité" perd beaucoup dès qu'on admet ça. Smiley biggrin
Il n'y a plus de problème en ce qui me concerne.

Après, je sais bien qu'il s'agit là d'une interprétation dont les répercussions seront très limitées, mais vu que la majorité des navigateurs me semble jouer contre Opera, qui pourtant, va dans le sens des specs, je tenais juste à savoir si ce que j'ai compris est juste ou pas.

C'est surtout pour comprendre plus que pour résoudre un problème que je pose cette question.
Donc si une âme érudite en la matière peut affirmer quoi que ce soit sur ce sujet, je suis preneur, et me ferait un plaisir de modifier le sujet avec un [résolu]. Smiley smile

gcyrillus > Heu... J'ai du mal à bien comprendre tes phrases, en fait. Il manquerait pas un peu de ponctuations ? Smiley smile
Sinon pour le coup des flottants, si tu as un code sous la main, je suis preneur, pour le tester.

Merci à vous deux pour vos réponses.
mpop > Sans rancune. Smiley langue
Sujet clos
Aller à