Bonjour à Toutes et à Tous,

Un post que je pensais ne jamais faire... J'ai une div avec un hauteur assez "élevée". La valeur convient très bien à Firefox mais pas à Safari/Chrome.

Par exemple : 3440px avec Firefox alors qu'avec Chrome 3100px suffisent.

Est-ce quelqu'un parmi vous a déjà eu ce souci ? J'ai testé sous Windows et Mac OS.

Merci pour votre aide.

Stef

PS : en revanche, aucun souci avec les largeurs...

-
Edité par stefparis 7 septembre 2017 à 13:17:25

Peut-être que tester avec des préfixes t'aiderait.

• -o- pour Opera
• -moz- pour Gecko (Mozilla)
• -webkit- pour Webkit (Chrome, Safari, Android...)
• -ms- pour Microsoft (Internet Explorer)
• -khtml- pour KHTML (Konqueror)

J'ai un problème similaire. Je test mes codes avec FireFox. Pour donner une dimension à mes images, je ne précise que la largeur (ou la hauteur selon le cas), l'autre valeur est automatiquement modifiée pour garder les proportions. Et quand je test mon site sur chrome, la l'image garde la même largeur (ma foie logique), mais remplie tout l'espace possible en hauteur. Une solution assez simple est bien sur de préciser aussi la hauteur, mais cela devient embêtant quand je veux afficher des images dont je ne connais pas les dimensions à l'avance (images envoyées par un utilisateur par exemple). Il y a bien sur des solutions en PHP, mais c'est quand même embetant...

Je vais peut être dire une bêtise mais faire en sorte que ton image tombe dans une flexbox avec un max heigth ou max vh ça ne permettrais pas de résoudre le prob ? N'ayant pas vu le code c'est un peut du 50/50, et peut être après si la valeurs de l'image est plus grande permettre de la voir en taille réel si on clique dessus genre lightbox.

Merci Exen pour ta piste. Il faut que je creuse cette voie car je n'ai rien trouvé concernant la hauteur sur la doc officiel pour les prefixes.

Ça fonctionne avec les hack CSS.

C'est fou que deux navigateurs n'interprète pas de la même manière une hauteur en pixels !!!

@GabrielRayzal : mets une largeur dans ta CSS et la hauteur en auto. Par exemple :

.monimage{
   width: 200px; /* en px ou en % */
   height: auto;}

De ce fait, tu fixes la largeur et le navigateur calcule automatiquement la hauteur. Un souci de moins !

Je continue de creuser et vous tiens informé si je trouve la solution.

Edit : pour corrections des fautes...

-
Edité par stefparis 7 septembre 2017 à 21:48:05

Tiens regarde en fait tu colle le préfixe du navigateur et tu colle la valeur désire, la je l'ai mise en vh mais tu peut par exemple poser en px genre tu indique pour moz (firefox )3400px et avec le prefixe webkit ( chrome safari) 3400px

.monimage {
  -moz-height:80vh;
  -webkit-height:82vh;
  -o-height:80vh;
  -ms-height:80vh;
  height:80vh;
}

Comme tu peut voir pour chrome j'ai augmenté de deux pourcent la place que va prendre l'image sur le viewport height.

-
Edité par exen 7 septembre 2017 à 22:51:01

Bonjour,

exen > Euh ui mais non : les préfixes c'était (et j'insiste sur le passé) uniquement pour certaines propriétés CSS, celles qui étaient en beta. Et certainement pas height !

steparis > Tu pourrais nous donner un lien vers la page, pour qu'on ait une idée de ce pourquoi tu dois donner une hauteur à une div ?

Ha ok, autans pour moi, en plus là quand je retest c'est clair que ça ne fonctionne pas.

J'en viens à te poser une question vu que tu es sur ce post, existe il une instruction css pour faire ce genre de truc allouer une donné différente pour chaque navigateurs ?

-
Edité par exen 7 septembre 2017 à 23:32:39

> existe il une instruction css pour faire ce genre de truc allouer une donné différente pour chaque navigateurs ?

Non. Enfin, il existe des hacks. Mais ce sont des exploitations de bugs et c'est vraiment déconseillé de les utiliser - d'autant que ça peut disparaître à tout instant.

@Lamecarlate   Merci pour ta réponse et le renseignement, en tout cas.

Merci pour ta réponse Lamecarlate. Pour le lien, j'ai tout virer ce matin... Pour le moment, je me contente des hacks.

Pour faire simple, les hauteurs :

- Chrome/Safari : 3100px,

- Firefox : 3440px.

Si je mets 3100px, sous Firefox, la div du dessous viens se superposer à la div du dessus. Et si je mets 3440, sous Chrome, la div est trop grande avec un grand blanc avant la div suivante.

Je vais essayer de faire une page avec des blocs colorés tout simple...

> la div du dessous viens se superposer à la div du dessus

Ça sent le position: absolute… J'attends de voir la page avec les blocs colorés pour bien comprendre le souci

Salut,

Le fait d'avoir besoin de valeurs différentes pour un navigateur ou l'autre montre qu'il y a un problème dans le code. Il faut identifier lequel, et résoudre le problème plutôt que de chercher à faire avec.

Montre-nous ton site.

Bonjour à Tous,

Voici les div qui posent problème !

@rhoomanu : tout à fait d'accord avec toi mais lequel ?? Est-ce un problème de div imbriquées ? J'ai pourtant bien fait attention à ça ! Je partage l'opinion de Lamecarlate : les hacks ne sont que des rustines. Il faut impérativement faire sans. Car le temps gagné sera inversement proportionnel au temps perdu quand ces rustines ne seront plus reconnues par les navigateurs !

-
Edité par stefparis 10 septembre 2017 à 15:35:51

Simple : tu précises une hauteur fixe à tes éléments .hautresult. Donc s'ils ont plus de contenu que de hauteur, il y a un problème de dépassement. retire tes propriétés height (trois endroits différents apparemment), et tout rentre dans l'ordre. Il faut éviter, au maximum, de préciser des hauteur aux éléments. Laisse-leur faire la taille qu'ils ont besoin de faire.

Également :

• Laisse tomber float, c'est d'un autre âge. Utilise flexbox.
• Les marges d'un élément ne devraient jamais être en pourcentage (sauf dans le cas d'une grid, et encore…). Des marges n'ont pas à évoluer en fonction d'une taille relative d'un parent. Laisse les en px, em, ou rem.
• Width: 100%; , c'est au mieux inutile, au pire source de problèmes.

Merci rhooManu.

Concernant .hautresult : c'est une hauteur que j'applique à un bloc avec un contenu bien défini. Il n'a aucune raison d'évoluer. Si je retire la hauteur, mon footer part en vrille... C'est ce que j'avais fait au début.

C'est "drôle" parce que tu as le discours inverse de mon prof : il faut obligatoirement mettre une hauteur et une largeur pour tous vos blocs...

Au contraire, une hauteur a toutes les raisons d'évoluer. Il suffit que la typo chargée ne soit pas la bonne pour X ou Y raison, et la hauteur de ligne peut varier. Il suffit qu'un des visiteurs ait des paramètres spécifiques dans son navigateur pour augmenter la taille des polices (problèmes de vue), et la hauteur globale va changer. Il suffit même que le lissage de polices soit différent (et il l'est, d'un navigateur à l'autre, d'un système à l'autre), pour que des textes passent à la ligne à différents endroits et fassent donc une ligne de plus. Si la largeur varie, la hauteur peut varier aussi. Bref, la hauteur doit être flexible.

Et ton footer part en vrille principalement parce que .pagereponse aussi a une hauteur fixe.

Je te montre la différence : 

Avec height: 

Sans height:

Le problème de ton prof est assez récurrent : ses connaissances ne sont pas à jour. C'est souvent le cas des enseignants, parce qu'ils ne sont plus dans le milieu, et c'est plus dur de se maintenir à niveau si on n'est plus entourés de gens du milieu qui nous montrent les dernières nouveautés et les bonnes pratiques (qui évoluent vite).

Et même si le problème ne vient pas de là, le résultat y est quand même : utiliser float et mettre des tailles à tout, c'est ce qu'on faisait avant.

Vraiment, j'insiste : passe à flexbox. C'est FAIT pour ça. Pas float. Float sert à insérer des images dans une portion de texte, et rien d'autre — même si son utilisation a longtemps été détournée pour faire des colonnes parce qu'on n'avait pas mieux. Aujourd'hui on a BEAUCOUP mieux, créé spécifiquement pour ça ; il n'y a aucune raison de ne pas s'en servir, non ?

---

Edit: et vu que je suis têtu, histoire de prouver ce que j'avance : même système, parfaitement fluide, robuste, et responsive, avec très peu de lignes (redimensionner la fenêtre de rendu pour jouer avec) : https://jsfiddle.net/swx9qzc7/ 

-
Edité par EmmanuelBeziat 10 septembre 2017 à 17:28:11

Ben j'ai juste à dire "clap clap clap" à rhooManu : démonstration claire, illustrée, pédagogique, parfaite

(et oui, c'est le problème principal des enseignants : difficile de se tenir à jour, même dans le "milieu" la veille prend un temps incroyable, alors s'il faut préparer des cours, et passer la journée à les présenter…)

Merci rhoManu pour tes éclaircissements. En fait, je n'ai jamais pas blairer les hauteurs...

Quant aux float... Tout dépend du site. Si c'est deux div, pourquoi pas. En revanche, c'est vrai que le flex offre un certain confort... surtout dans l'alignement des div.

Encore merci rhoManu.

Je passe le sujet en résolu

Je t'en prie.

Ce qui serait intéressant, c'est de pouvoir dialoguer avec ton prof aussi ; étant moi-même formateur, je pense qu'il est très important de véhiculer des bases les plus "propres" possibles — parce que l'un dans l'autre, c'est tout ce qu'on peut offrir à nos élèves : des bases, qu'il leur faudra consolider et sur lesquelles ils devront bâtir par l'expérience et le travail répété.

Je ne veux en aucun cas insinuer qu'il est mauvais dans ce qu'il fait ; il n'est peut-être tout simplement pas au courant des dernières "nouveautés", ou tout simplement il ne sait pas que ces nouveautés existent. Il se peut même qu'il les connaisse, mais qu'il n'y ait pas été confronté suffisamment pour les comprendre ou savoir les transmettre.

Je serais vraiment ravi de pouvoir dialoguer avec lui à ce sujet, et s'il faut lui trouver tout un tas de support pour qu'il puisse se mettre à jour efficacement, je suis tout à fait disposé à le faire.