28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous ! Smiley smile

C'est mon premier message ici et je suis content de trouver des gens partageant la même passion.
Je fais appel à vous pour résoudre un ptit problème sous Firefox pas évident puisque le bug apparait online mais jamais en local.

Le voici.

A gauche, la news qui bug, à droite la news qui marche.

Le site est à cette adresse.

Il ne se produit qu'online donc, et uniquement sous Firefox, IE et Opera s'en sortent bien. HTML parlant, tout est normal, la source n'est pas du tout altérée, donc c'est bien un problème de CSS.

Vous pouvez consulter la CSS ici.


A noter que ce problème d'affichage intervient généralement quand on clique sur news, mais un F5 remet généralement d'aplomb la page (pas toujours totalement toutefois). Aucune des autres pages ne souffre du même problème.

Vu que la CSS fait pas loin de 650 lignes, je pensais à un problème de chargement de la page avant la totalité de la CSS ou quelque chose de ce genre, mais ce n'est que spéculation. Un sleep(3) par exemple dans le code PHP pour supposer le chargement de la CSS complet ne résoud rien...

J'aurais voulu savoir si quelqu'un aurait déjà eu un problème similaire et si par expérience il aurait eu quelques tuyaux à me donner. Smiley smile
Toute suggestion/critique est la bienvenue également.

Merci.


PS : CSS certifiée, l'HTML ne l'est pas par contre, mais est qd même assez propre Smiley langue
Modifié par laligatz (23 May 2005 - 16:33)
salut

pas de problèmes d'affichage avec firefox...tu as corrigé?

après d'autres recherches firefox et sa console javascript détecte une erreur.


////////
//  PLUGIN REGISTRATION FUNCTIONS
////////

// Registers commands and creates constants.
function registerCommands(cmdStr) {
	if (typeof cmdStr!='string') return;

	var pM = cmdStr.split(',');
	pms = pms.concat(pM);

	for (var i = 0; i< pM.length; i++) {
		eval(pM[ i].toUpperCase()+'='+pmCount++);ERREUR!
	}
}


la validation html est une catastrophe! 240 erreurs...en transitionnel... Smiley decu
le design est très chouette, bravo!
intérésse toi aux extensions de firefox, certaines sont franchement top pour un webmaster.une barre en français se nomme web devellopeur, elle me rend de nombreux services.en lui demandant gentillement, elle devrait faire de même pour toi. Smiley cligne

ce forum aussi à un pb, à chaque ajout de smileys, la page revient au début....

ie5, 5.5 et 6 ne produise aucune erreur js, c'est donc un pb inhérent aux plug-in firefox.j'ai la version 1.0.3 mais pas de soucis d'affichage.

je vais explorer plus en profondeur.
Modifié par Raphael (23 May 2005 - 17:39)
Administrateur
Attention à l'affichage correct des codes :

http://forum.alsacreations.com/help.php
Règle a écrit :
13- Mise en forme générale des messages
Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Des boutons de mise en forme sont prévus pour cela (gras, italique, etc.). Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème.
Bonjour,

J'ai aussi rencontré ce genre de désagrément : défaut d'affichage n'apparaissant pas systématiquement sous FF, toujours rectifié par un F5, et pas de pb dans les autres navigateurs.

Dans un cas ce défaut avait un impact visuel lourd, j'ai donc contourné le problème sans cerner sa source : j'ai légèrement modifié la structure xhtml, en sortant de son container un élément positionné en relatif par rapport au bas du container pour le mettre dans le flux (à la suite de son ex container).

Sans avoir fait d'analyse détaillée, mon intuition est la suivante :
- FF traite les éléments (pour l'application des CSS et le rendu) dans un ordre qui n'est pas totalement déterministe (ce pourrait être le cas notamment si certaines séquences du programme son multithreads), ou dans un ordre déterministe qui n'est pas le bon.
- dans certains cas il doit y avoir "synchronisation" entre les éléments, mais elle ne se fait pas ou mal sous FF
- dans l'exemple que je donnais, l'élément positionné relativement au bas d'un container doit être traité après son container. Cependant que le container ne peut lui même être traité qu'après les éléments qu'il contient pour en déterminer la taille. Il se trouve donc une boucle éventuellement complexe qui n'est pas correctement traitée. Dans mon cas l'élément relatif est positionné avant que la taille du parent soit connue.
- lors d'un rafraîchissement, tous les éléments ont déjà la bonne taille avant même que toutes les règles ne soient à nouveaux appliquées, ainsi l'élément relatif sera correctement positionné .
Modifié par Xavier (23 May 2005 - 17:36)
pour le modérateur

les bbcodes ne fonctionne pas correctement avec firefox.ils manquent la balise fermante ou quand elle est présente ce n'est pas la bonne.

j'obtient, par exemple, la balise fermante li pour la balise ouvrante code.
Administrateur
keran a écrit :

j'obtient, par exemple, la balise fermante li pour la balise ouvrante code.

C'est parce que [ i] (sans espace) est intérprêté en BBCode.
J'édite.
Keran, ui la certif HTML donne quelque chose d'assez hideux mais si tu regardes de plus près, ya bcps de fois la même erreur, et svt dans mes scripts qui gèrent les images. Les noms de paramètres ont pas l'air de lui plairent vraiment. Après ya les truks habituels genre les alt etc qui manquent. Syntaxiquement mon html ne doit pas être si mauvais que le W3C le laisse sous-entendre.. Smiley smile

Sinon Xavier, merci de ta réponse, je vais essayer d'aller dans ce sens, bidouiller les attributs de flux pour le texte des news, mais c pas très pratique, les modifs doivent se faire online...

Je reste ouvert à tte autre suggestion.
Je viens de remplacer chaque saut de lignes <br/> par des balises <p></p>. Apparemment ya du mieux, et à part quelques très légers décalages, ca semble bien marcher.
Mystère mystère...
laligatz online a écrit :
bidouiller les attributs de flux
Je ne comprends pas ce que tu entends par attributs de flux. Pour ma part je parlais du flux "naturel" par opposition au positionnement (position:relatif ou postion:absolute) qui est une modification du flux naturel, ou carrement le retrait d'un élément du flux.

Pour éviter de tester online tu peux installer apache en locale c'est beaucoup plus pratique dans tous les cas.
Xavier, je parlais de la même chose (relative, absolute), mais le terme n'était pas bien heureux je te l'accorde.. Smiley smile

Sinon, bien sur que j'ai un apache + php local qui me permet de développer le site, mais le bug sous firefox comme je l'ai dit plus haut n'apparait qu'online, et jms en local alors que le site est une copie à l'octet près de ma version en local.

D'où un problème à mon avis lié à la vitesse du serveur web (ce serait étonnant) ou de vitesse de transfert (débit adsl donc), chose plus probable... Le code HTML généré est évidemment le même, alors je vois pas d'autre facteurs pouvant entrer en ligne de compte.

Enfin, en remplaçant chaque saut de ligne par des balises <p></p> (d'ailleurs c'est plus propre HTML parlant Smiley langue ) tout semble aller mieux.
Administrateur
Juste pour éviter les confusions, le positionnement relatif fait partie du flux normal, il n'est qu'un décalage dans le flux normal Smiley cligne
Bonjour Smiley smile
il se trouve que je rencontre un problème similaire ( pour voir la page en question c'est par ici ) . Concrétement, lorsque l'on ouvre la page pour la première fois avec firefox (page pas encore stocké dans le cache) une partie de mes organigramme est décalé vers le haut, mais aprés un rafraichissement de la page ou une seconde visite (page stocké dans le cache) tout redeviens normal. Les divs incriminés sont positionnés en relatif, à priori le problème viendrait donc de la manière dont firefox gère le positionnement relatif, l'intuition de Xavier me semble donc la bonne.
Mais le plus étonnant dans mon cas est que les div en relatif semble tout de même avoir le bon espacement vertical, une partie de la feuille de style serait donc interprété au premier passage mais pas la totalité (à s'arracher les cheveux Smiley ohwell ) ...
De plus le décalage vers le haut qui est fait sur les divs en question ne semble correspondre à la position d'aucune autre div positionné differement...
Désolé je n'aide pas beaucoup, mais avec un peu de chance ce que j'ai dit au dessus aidera à cerner un peu le problème (enfin j'espère).
Si j'avance sur la question je vous tiens au courrant Smiley smile

PS : un grand bravo pour la qualité du site et des forums Smiley smile (ah bon c'est pas le bon endroit pour dire ça ? ok je sors Smiley langue )