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

**Droïde Système7** · 22/12/2007, 15h25

Bonjour,

Encore cette histoire de gueguerre entre IE et les autres butineurs

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Kerod** · 22/12/2007, 16h13

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Candygirl** · 22/12/2007, 16h31

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

**Droïde Système7** · 22/12/2007, 16h33

Bonsoir Kerod,

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 !

**Droïde Système7** · 22/12/2007, 16h36

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 ?

**Kerod** · 22/12/2007, 16h39

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

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

**Candygirl** · 22/12/2007, 18h13

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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]-->

**Droïde Système7** · 22/12/2007, 18h56

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é.

**Candygirl** · 22/12/2007, 19h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

**Droïde Système7** · 22/12/2007, 19h38

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.

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

merci de votre aide !

Edit :

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)

**Candygirl** · 22/12/2007, 19h54

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<--! ....  -->

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Droïde Système7** · 22/12/2007, 20h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é ?

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

**Candygirl** · 22/12/2007, 20h25

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Droïde Système7** · 22/12/2007, 20h48

Re Candygirl,

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

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

**Candygirl** · 22/12/2007, 21h18

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

Quand je disais que je n'avais jamais réfléchi à la question... Il faut simplement virer le:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Droïde Système7** · 23/12/2007, 11h08

Bonjour,

Candygirl écrivait :

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

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

Merci encore de ton aide

Joyeuses Fêtes à tout le forum !

Jean-Pierre

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

CSS

Discussions similaires

Partager

Partager