Utilisation de [height: auto] avec [max-height] et IE

Bonjour,

Encore cette histoire de gueguerre entre IE et les autres butineurs :aie:

Après bien des recherches, je tourne en rond, j'ai trouvé des tags à ajouter du genre :

Code:

---

1 2 3 4

<!--[if IE]> ... height:100%; <![endif]-->

---

Mais je retourne en rond, car c'est pas exactement ce que je recherche.

Voici mon code qui fonctionne impeccable partout (?) mais sauf sous IE :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

... <pre style="margin: 0px; padding: 6px; border: 1px inset; width: 80%; height: auto; max-height: 150px; text-align: left; overflow: auto"> Ici le texte, tout le texte... Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. Un texte indéfini en nombre de lignes. </pre> ...

---

Je souhaite un code qui permette (sans .CSS) de passer en height: auto avec une limite de max-height: 150px.

Bref, d'obtenir une barre de scroll verticale passé par exemple les 150px de hauteur.

Cela est-il possible également avec IE ?

Merci de vos expériences en HTML.

Sous tous les navigateurs exceptés IE le max-height fonctionnera mais pour IE c'est ton height que tu dois spécifier.

autrement dit tu pourrais utiliser un hack :aie:

Code:

---

1 2 3 4

height : auto !important; /* Tous les navigateurs exceptés IE6 < */ height: 150px; /* IE6 < */ max-height: 150px; /* Tous nav exceptés IE6 < */

---

C'est ce que tu recherches ?

Citation:

---

Envoyé par Kerod

Sous tous les navigateurs exceptés IE le max-height fonctionnera mais pour IE c'est ton height que tu dois spécifier.

---

IE7 interprète aussi le max-height. C'est donc IE6 et moins qui sont concernés.

Ensuite ton code permet de reproduire le comportement d'un min-height sur IE6 mais pas d'un max-height ;)

Bonsoir Kerod,

Citation:

---

C'est ce que tu recherches ?

---

Whaaaouuuhhh tu en sais des choses !

Je n'avais pas encore réussi en obtenant un résultat convenable

Ce n'est pas mal du tout, mais partout (sous les autres fureteurs) ça fonctionne impec, là encore sous IE, le heigth reste au max en 150px, tandis que par exemple sous Mozilla ça fonctionne impec en montrant automatiquemennt et seulement les lignes contenues.

Bref, c'est déjà pas mal, mais si le heigth de IE pouvait se convertir en auto...

Mais je te remercie déjà de ce code, s'il n'est pas possible de faite mieux, je serais déjà très content. Super déjà d'avoir la barre de scroll avec IE !

Citation:

---

Envoyé par Candygirl

IE7 interprète aussi le max-height. C'est donc IE6 et moins qui sont concernés.

Ensuite ton code permet de reproduire le comportement d'un min-height sur IE6 mais pas d'un max-height ;)

---

Bonsoir Candygirl,

Alors en concret, que proposes-tu ? ;)

Citation:

---

Envoyé par Candygirl

IE7 interprète aussi le max-height. C'est donc IE6 et moins qui sont concernés.

---

Oui oui c'est ce qui est dit dans les commentaires du CSS :aie:

Citation:

---

Envoyé par Candygirl

Ensuite ton code permet de reproduire le comportement d'un min-height sur IE6 mais pas d'un max-height ;)

---

Effectivement re:aie:

Citation:

---

Envoyé par Droïde Système7

Alors en concret, que proposes-tu ? ;)

---

Je n'ai rien proposé de concret parce que je ne me suis jamais penchée sur la question. J'essaierais d'abord un truc du genre je pense:

Code:

---

1 2 3 4 5 6 7 8

<!--[if lt IE 7]> <style type="text/css"> pre { height:150px; /* au cas ou jvascript est désactivé */ height:expression(this.offsetHeight>=150 ? "150px" : "auto"); } </style> <![endif]-->

---

Merci Candygirl de ta réponse,

Manque de bol, ça flanque le boxon sur Mozilla, sur IE ça sucre la barre de scroll.

Je rapelle que je ne passe pas en fichier .CSS pour diverses raisons.

Hein ? si si je n'ai pas posté en ce forum CSS, mais... ;)


Edit : Au fait, le principe de mon problème doit être similaire lorsque l'on place une paire de balises "code" en ces forums ou en d'autres ; le code généré doit tenir compte de s'il s'agit d'une seule ligne ou de plusieurs. Bref de placer ou non cette barre de scroll, tout en veillant si pas de barre de scroll, de ne pas laisser de "blanc" au dessous. Mais c'est peut-être super compliqué.

Citation:

---

Envoyé par Droïde Système7

Manque de bol, ça flanque le boxon sur Mozilla

---

Il n'y a aucune raison que ça ait une quelconque influence sur Mozilla, Firefox,.... Tous les navigateurs sauf IE6 n'interprètent pas ce code vu qu'ils ne voient qu'un commentaire html.

On pourrait voir où et comment tu l'as inséré?

Autrement pour ton problème de ne pas passer par un ficier .css, il est vrai que je l'ai omis, il suffirait de virer

Code:

---

height: auto;

---

de ta balise pre qui est inutile puisque valeur par défaut et qu'on veut que ça soit la valeur du height dans le commentaire conditionnel qui soit appliqué.

Citation:

---

Il n'y a aucune raison que ça ait une quelconque influence sur Mozilla, Firefox,.... Tous les navigateurs sauf IE6 n'interprètent pas ce code vu qu'ils ne voient qu'un commentaire html.

---

:oops: en effet, sorry, je ne sais plus quelle modif j'avais bidouillé.

Citation:

---

On pourrait voir où et comment tu l'as inséré?

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

... <pre style="margin: 0px; padding: 6px; border: 1px inset; width: 80%;     height: auto !important; /* Tous les navigateurs exceptés IE < */ height: 150px; /* IE < */ max-height: 150px; /* Tous nav exceptés IE < */     <!--[if lt IE 7]> height:150px; /* au cas ou jvascript est désactivé */ height:expression(this.offsetHeight>=150 ? "150px" : "auto"); <![endif]-->     Ici le texte, tout le texte... Des tas de lignes. </pre> ...

---

Voilà le code qui fonctionne parfaitement partout sauf sur IE.

Si seulement en cas de petite hauteur, ce fichu container pouvait s'ajuster en hauteur et ne pas laisser une certaine zone de "blanc" au dessous.

:D merci de votre aide !

Edit :

Citation:

---

Autrement pour ton problème de ne pas passer par un ficier .css, il est vrai que je l'ai omis, il suffirait de virer height: auto;

---

height: auto !important; viré ou non donne le même résultat, mais reste à savoir si j'ai correctement appliqué ce conseil ; le HTML n'est pas un de mes langages très approfondis.

(Tests effectués sous IE 5.5)

Citation:

---

Envoyé par Droïde Système7

mais reste à savoir si j'ai correctement applique ce conseil ; le HTML n'est pas un de mes langages très approfondis.

---

euh effectivement ;) Non, ce n'est pas exactement ce qu'il fallait faire :aie:

Les commentaires conditionnels sont des instrcutions que l'on peut faire exécuter exclusivement par telles ou tells versions ciblées de IE. POur tous les navigateurs , ils passent comme de vulgaires commentaire HTMl vu la syntax:

Code:

---

<--! .... -->

---

Ces instructions doivent donc figurer dans le code html de la page et non pas dans l'attribut style d'une balise:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!--[if lt IE 7]> <style type="text/css"> pre { height:150px; /* au cas ou jvascript est désactivé */ height:expression(this.offsetHeight>=150 ? "150px" : "auto"); } </style> <![endif]--> <pre style="margin: 0px;                  padding: 6px;                  border: 1px inset;                 width: 80%; max-height: 150px;"> Ici le texte, tout le texte... Des tas de lignes. </pre>

---

Je savais bien que j'avais loupé au moins une marche, mais je viens de tester sans... fichier .CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body>     Voici le code entier, brut de page sans aucunes fioritures :<br> <br>     <!--[if lt IE 7]> <style type="text/css"> pre { height:150px; /* au cas ou jvascript est désactivé */ height:expression(this.offsetHeight>=150 ? "150px" : "auto"); } </style> <![endif]--> <pre style="margin: 0px; padding: 6px; border: 1px inset; width: 80%; max-height: 150px;"> Ici le texte, tout le texte... Des tas de lignes. </pre>       </body></html>

---

Rien de changé, quelle autre marche ai-je loupé ? :oops:

Edit : Si ça a changé, sur IE = rien de spécial sauf pas de barre de scroll en cas de texte long. Sur Mozillla par exemple, là un texte long déborde de son container, comme tout à l'heure.
Mais peut-être impossible à résoudre mon histoire :roll:

Citation:

---

Envoyé par Droïde Système7

Rien de changé, quelle autre marche ai-je loupé ?

---

Perso je vois 2 choses:

1) l'overflow:auto

Le code que je t'ai donné est dans l'optique de cet overflow. EN fait, IE6 et moins, ne supporte (quasi) pas que du contenu puisse dépasser de son élément.
D'où en fait le height qui sert de min-height vu qu'il agrandit l'élément au gré de son contenu. Donc, sans overflow, mon code n'aura pas d'influance...

2) Pas de déclaration de doctype

Je ne sais pas de quelle manière tu codes (montage en tableaux, montage en css, xhtml, html visiblement), mais si tu veux éviter une grosses différence d'interprétation des css entre les différents navigateurs tu ferais bien de renseigner un doctype au haut de ta page

Par exemple:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <body>     Voici le code entier, brut de page sans aucunes fioritures :<br> <br>     <!--[if lt IE 7]> <style type="text/css"> pre { height:150px; /* au cas ou jvascript est désactivé */ height:expression(this.offsetHeight>=150 ? "150px" : "auto"); } </style> <![endif]--> <pre style="margin: 0px;                  padding: 6px;                  border: 1px inset;                 width: 80%;                                                                  overflow:auto; max-height: 150px;"> Ici le texte, tout le texte... Des tas de lignes. <br> Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br>Ici le texte, tout le texte... Des tas de lignes. <br> </pre>       </body></html>

---

Re Candygirl,

Citation:

---

Je ne sais pas de quelle manière tu codes (montage en tableaux, montage en css, xhtml, html visiblement), mais si tu veux éviter une grosses différence d'interprétation des css entre les différents navigateurs tu ferais bien de renseigner un doctype au haut de ta page

---

De quelle manière je code en HTML ? comme tu peux le voir = comme un cochon :mouarf:

Ce n'est pas mon langage, si j'avais plus de temps... Mais nous en sommes tous à ce point.

Je te remercie encore d'avoir pris de ton temps pour m'aider, idem Kerod.
Bon..., nous en revenons comme tout à l'heure ; c'est à dire que tout est ok sauf ce fichu IE qui sur quelques lignes, si pas "...max", hé bien il reste de l'espace au dessous.

Vous n'allons pas nous prendre la citrouille avec cette histoire, j'ai ma ScrollBar avec IE, oui bon du "blanc" au dessous au cas sus-cité, mais je ne vais pas en faire un plat ;)

Bon we et bonne préparation de Fêtes au forum :D

Citation:

---

Envoyé par Droïde Système7

c'est à dire que tout est ok sauf ce fichu IE qui sur quelques lignes, si pas "...max", hé bien il reste de l'espace au dessous.

---

C'est ma faute, c'est mon code qui est pourri :aie:
Quand je disais que je n'avais jamais réfléchi à la question... Il faut simplement virer le:

Code:

---

height:150px; /* au cas ou jvascript est désactivé */

---

Forcément, si on lui impose 150 il va toujours faire 150 ;)

Bonjour,

Candygirl écrivait :

Citation:

---

C'est ma faute, c'est mon code qui est pourri [...]

---

Heuuu... là franchement, si je codais le HTML en pourri comme toi, j'en saurerais au plafond de joie ;)

J'ai testé au moins pendant 10 minutes ton code et n'en croyais pas mes yeux ; un beau cadeau de Noël que tu me donnes :king:

En effet cette histoire me bloquait un peu dans mon projet ; étant plutôt perfectionniste...

Merci encore de ton aide http://yelims.free.fr/Amour/Amour43.gif

Joyeuses Fêtes à tout le forum !

Jean-Pierre