openElement

Salut, j'ai un gros souci, j'ai créé un site et je vois que sous mon navigateur Firefox, il s'affiche correctement, mais si je l'ouvre dans explorer ou chrome, etc... ma mise en page bouge tout est décalé au niveau des textes [taille de la police, espace entre les caractères et hauteur de la ligne], même en modifiant la hauteur de la ligne dans les options textes, ca s'affiche a chaque fois différemment sur chaque navigateur 

exemple d'une page de mon site sous firefox tout es ok

 

Mais sous Edge, Chrome et Explorer il y a des gros décalages

mon site http://www.space-sheriff.net" rel="nofollow - www.space-sheriff.net

Peut être tester en responsive, plus facile de corriger tout ça.

Quand tu passe sur un autre navigateur que Firefox, genre Edge, Chrome, ou autre tu n'a pas de décalage comme sur les photos que j'ai mis en exemple

http://users.skynet.be/x-or/gavan.htm" rel="nofollow - http://users.skynet.be/x-or/gavan.htm  Ça fait ça à toutes les pages qui ont du texte

Chaque fureteur va interpréter la police de caractères et ses paramètres à sa façon en fonction de l'écran utilisé pour l'afficher.  Dans certains cas ils peuvent même y substituer une autre police.

Pour bien comprendre votre souci, il faudrait voir la conception de votre page.  

Avez-vous inséré les polices de caractères dans votre projet?

Est-que votre problème provient de la superposition occasionnelle de texte avec l'image "card gavan pack 03.png" ?

Que je mette des images ou non, ca ne change rien, c'est un problème de texte, de hauteur de ligne je crois, j'utilise OpenElement 1.57R9, je n'utilise rien d'autre.

Non je n'ai rien inséré du tout, je suis vraiment novice, je n'y connais pas grand-chose en codes, etc. Mon site est bon pour moi, le seul souci c'est les textes qui ne s'affiche pas correctement suivant le navigateur web utilisé

Je vous ai mis un fichier .rar avec une page du site ici https://mega.nz/#!zyQ0EYJa!WmXRLjQAcq_80cN57evs1ggGT4UdCzq5VTW1sXBTAkc

Comme indiqué, c'est interprétation de la font par le navigateur, et comme vous n'êtes pas non plus en responsive (du moins pour les éléments texte surtout), c'est "normal", vous ne pourrez rien changer pour l'instant.

Pourtant c'est une font standard, c'est la verdana a 10px avec une hauteur de ligne a 11px et a 12px pour d'autres pages. Quand je créé une nouvelle page je met dans largeur de la page: taille fixe, pour mes textes je les met dans Elements: Texte multi-lignes et dans Styles Textes: Alignements: justifier, hauteur de ligne: 11px ou 12px suivant la page.

Y aura-t-il une mise à jour pour corriger ce problème avec la prochaine version de openElement, j'utilise la version 1.57 R9 ?

dans ce cas la, compressez votre projet, au format zip.
Allez ensuite sur le site wetransfer.com et m'envoyez le zip à contact@sensode.com

c'est envoyé, merci

Après hauteur unique, le problème avait été réglé.

Voici ce que vous devez faire du coup pour harmoniser votre site web :

Comme vous pouvez le voir, voici ce que ca donne dans Chrome, Edge et Firefox.

Chrome

Edge

Firefox

Dans votre projet, sélectionnez le bloc de texte, puis dans le menu du haut, allez dans l'onglet Zone de Style.
Vous devriez voir ceci :

Nous allons lui mettre la Font et la taille de celle-ci par défaut.
Donc du Verdana en 10px. Sélectionnez les dans les menu déroulant.

Vous devriez avoir ceci maintenant :

Sauvegardez bien la page.
Vous allez voir que votre bloc de texte est remonté:

Refaites une prévisualisation dans Firefox :


C'est Firefox qui "modifiait" malheureusement votre site. Vous n'avez plus qu'à recaler correctement les blocs et images pour que tout tombe comme vous voulez. 
Plus de souci maintenant.

reste plus à Hobby d'insérer le tuto dans la liste qui devrait être bien mieux mise en exergue ...

Avant d'en arriver là, il faut une publication avec un titre cohérent avec le sujet traité.  Il faut aussi que le document soit construit comme un tuto.

@Brolysan Bonsoir et merci pour ton aide, mais j'ai beau faire comme tu dis et ça ne change rien, j'avais déjà paramétré mon texte dans l'onglet: zone de style sur véranda, 10Px mais cela ne change rien, j'ai beau essayer sur Firefox, Edge, Chrome et Explorer c'est pareil qu'avant tout s'affiche correctement sous Firefox mais sur les autres navigateurs le texte remonte où les espaces entre les lignes sont beaucoup trop importantes.

et voila ce que ca donne sous FIREFOX c'est ok (Verdana, 10PX, Hauteur de la ligne 13)

Mais sur les autres navigateur le texte remonte et ne s'aligne pas correctement avec l'image, les blocs de mes textes font et doivent faire la même hauteur que l'image qui s'affiche a coté, ce que je fait, sur firefox tout s'affiche correctement, mais pas sur les autres navigateurs. 

et donc, zone de styles (cadre principal) pour que cela fonctionne parfaitement.

La tout fonctionnera comme indiqué.

Voila Zone de style: Cadre principal toujours pareil, j'ai du augmenté la hauteur de la ligne sinon le texte remontait trop haut mais au final c'est toujours pareil sur Firefox l'affichage es bon sur les autres navigateurs tout es décalé ou trop haut et si je corrige pour que ca s'affiche bien sur Edge, Chrome et Explorer, c'est sur Firefox que ca ne va plus.

https://image.noelshack.com/fichiers/2019/05/2/1548802312-33.jpg

https://image.noelshack.com/fichiers/2019/05/2/1548801591-02.jpg

https://image.noelshack.com/fichiers/2019/05/2/1548801589-01.jpg

Après plus de 2h a testé sur une nouvelle page une photo et un bloc de texte, pas moyen d'avoir le même affichage sur tous les navigateurs, que je change de police, Arial, Verdana, de taille de police 10, 11, 12 Px, de hauteur de ligne ou même sans hauteur de ligne, il y a toujours un petit décalage suivant le navigateur utilisé, Mon navigateur par défaut et Firefox du coup je travaille avec openElement et je visualise mes pages sous openElement avec Firefox pour vérifier ma mise en page, même en changeant sous openElement le visualiseur en mettant Edge ou Explorer tous mes textes sont trop bas ou trop hauts par rapport aux photos et si je règle le problème pour que mes blocs de texte s’arrêtent pile poil juste en utilisant le visualiseur avec Edge ou Explorer, c'est sous Firefox que ça ne va plus.

Mais je pense que le souci vient d'ailleurs, je remarque que l'espace entre les lettres et les mots et la longueur des caractères ne s'affichent pas de la même façon sur chaque navigateur, sur Firefox la police est correct, sous Edge la police et un rien plus petite et plus fine du coup un texte qui fait 5 lignes sous Firefox n'en fait plus que 4 voir 3 Sous Edge et Explorer.

Voilà pourquoi les textes sous Edge et Explorer sont toujours plus courts, et si je corrige cela en augmentant la taille de la police ou la hauteur des lignes, il s'affichera correctement sous Edge et Explorer mais il sera beaucoup trop long sous Firefox

https://image.noelshack.com/fichiers/2019/05/3/1548812517-01.jpg
https://image.noelshack.com/fichiers/2019/05/3/1548812518-02.jpg
https://image.noelshack.com/fichiers/2019/05/3/1548812517-011.jpg
https://image.noelshack.com/fichiers/2019/05/3/1548812517-022.jpg

Les différences sont minimes mais finissent par être visibles sur de longs textes.

Vous pouvez faire une recherche sur le WEB  "font size not consistent across browsers"

J'ai l'impression qu'il faudrait revoir la construction de votre page pour que les images s'ajustent au texte et non le contraire.

Et comme on vous l'a indiqué plusieurs fois, les navigateurs interprètent différemment la font (réglages par défaut hélas), et plus vos blocs de textes seront long, plus vous aurez des souci.

Ok merci, oui la tu as résolu le problème, mais ça va être chaud a faire, j'ai plusieurs pages avec plus de 60 paragraphes, moi quand j'essaye de faire comme toi, les espaces entre les paragraphes sous FIREFOX sont bons mais sur EDGE et CHROME certains sont trop reproché ou trop espacé.

Comment a tu fait pour que les espaces entre les blocs de textes soit les même et ne bouge pas sous Firefox, Edge et Chrome?

Ensuite, menu de droite, lui mettre la largeur et la hauteur en auto et bien avoir le redimensionnement Garder le ratio hauteur/largeur.
Ensuite, rechanger la largeur et mettre 980px.

Descendez un peu plus bas et mettez le mode d'affichage en relative et le dépassement en Masquer.

Maintenant, déplacez l'image dans le panneau d'éléments.

Allez dans le menu du haut et Sélection : image

Mettez comme ceci :

On va maintenant changer la largeur de l'image, au lieu de pixels, on va mettre 23%.

Rajoutez maintenant un bloc de texte multi-lignes (donc vierge).

Le voici donc :

Allez dans le menu du haut, dans Zone de style (Cadre principal) :

Mettez donc Verdana, 10px, la couleur blanche pour le texte et texte justifié.

Sélectionnez tout le texte de votre "ancien" bloc de texte multi-lignes et faites un Ctrl+C (copier donc)

Ensuite, doubles cliquez dans le bloc de texte multi-lignes que nous avons ajouté tout à l'heure et faites Ctrl+v (soit coller).

Cliquez ailleurs dans la page puis re-sélectionnez le bloc de texte multi-lignes.

Nous allons maintenant lui changer sa largeur, et lui mettre 75%.

Allez dans le menu de droite, onglet Styles puis descendez et mettez une hauteur de ligne de 13px.

Toujours dans le même menu, cherchez les marges extérieures et mettez 2% à gauche.

Sauvegardez et visualisez.
Ca fonctionne sur 2 pages que j'ai (re)faite. Donc ca devrait aller pour vous. Vous n'aurez qu'à éventuellement ajuster votre texte selon les photos que vous voulez.

Vous avez malheureusement mal conçu (pas votre faute rassurez vous) au départ votre site et donc, il y a du boulot malheureusement pour coller à votre "envie de perfectionnement" bien bien poussé. 

j'ai essayé ton exemple, cette fois-ci ça s'affiche bien sûr Edge mais pas sur Firefox, de plus la largeur de mon image à 23% et trop petite, elle doit rester à 265Px soit 29,44% du coup le texte dépasse encore une fois.

C'est vraiment dommage que l'affichage du texte ne s'adapte pas pile-poil a la hauteur du bloc du texte.

Encore merci pour votre aide

Micmey, les choses ont changé depuis le début d'internet car avant, grosso modo, il n'y avait qu'un type d'écran. Maintenant ça va du petit portable au super grand écran, tu dois bien comprendre que ça change la donne, tu peux danser sur la tête, ça n'y changera rien (ou alors tu paies un pro et Brolysan en est un, il t'a déjà bien aidé gratos mais pour avoir le site de tes rêves, il faut plus).

Ton site présente beaucoup (trop) de blabla car est destiné aux passionnés.
Si tu veux une présentation nickel, mets des paragraphes d'appel et envoie vers des PDF qui eux seront EXACTEMENT comme tu veux qu'on les voie.