min-height et IE

**Er3van** · 06/06/2008, 11h28

Bonjour !

Bon, c'était juste pour copier le titre d'un sujet récent

En vrai y aussi min-width ^^

J'explique le problème :

Je souhaiterais centrer horizontalement et verticalement mon bloc, pour cela, j'utilise un positionnement absolu, et je centre le conteneur.

Pas de problème, sauf que lorsque que l'on réduit la fenêtre, le texte s'évade dans le coin haut/gauche de la fênetre et disparait, ennuyeux...

Evidemment j'ai pensé au min-height et min-width, que j'ai mis pour FF et qui corrige le bug, qui persiste cependant sous IE 6 ou ces attributs ne sont pas reconnus.

Pour parer à ça, j'ai voulu mettre un peu de JS pour IE 6 via un commentaire conditionnel, sauf que IE 6 ne se sent toujours pas concerné.

Mon code me parait bon, même si je suis surpris de devoir placer le min-height dans html, j'aurais cru bon de la placer dans body, mais dans ce cas c'est sans effet, sous FF y compris.

Bref, fin de la parlotte, du code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!--[if lt IE 7]>
		<style type="text/css">
			html {
				height : 600px ;
				width : 700px ;
				width : expression(document.body.clientWidth < 800? "800x": "auto" ) ;
			}
		</style>
	<![endif]-->
 
	<style type="text/css">
		html {
			margin : 0 ;
			padding : 0 ;
			height : 100% ;
			min-height : 600px ;
			min-width : 800px ;
		}
		body {
			margin : 0 ;
			padding : 0 ;
			background-color : #FFFFFFF ;
		}
		#contenu {
			position : absolute ;
			top  : 50% ;
			left : 50% ;
			margin-top : -300px ; /* height : 2 */
			margin-left : -400px ; /* width : 2 */
			height : 600px ;
			width : 800px ;
			background-color : #FF5555 ;
		}
	</style>
<body>
	<div id="contenu">Ceci est mon text, mais il faut qu&rsquo;il soit suffisemment long pour que je puisse avoir des retours à la ligne,mais pas trop pour pouvoir s&rsquo;afficher à l&rsquo;écran, quel casse-tête ! Et si vous redimensionnez l&rsquo;écran, hop, je disparais, la preuve, t&rsquo;arrives plus à lire le début hein ?</div>
</body>
</html>

**Er3van** · 06/06/2008, 11h49

Je viens également de constater que malgré le Doctype, le modèle de boîte Microsoft persiste sur IE 6, pb de Doctype ?

J'fais une correction en commentaires conditionnel, ça marche, mais le Doctype n'aurait pas du forcer le mode standard ? ( Je sens qu'on va encore me renvoyer vers des liens sur W3C ^^' )

EDIT : Bon, pour le coup du min-heigth c'est bon, enfin, pour FF, je l'ai mis dans body et ça marche, c'était juste que mon conteneur aurait du être en relatif.
Et pour mon deuxième pb, c'est juste qu'en faisant un copier/coller j'ai viré le Doctype par mégarde...

Reste toujours le pb de min-height / min-width sur IE, case départ !

**Er3van** · 06/06/2008, 13h34

Finalement j'ai rusé, plutôt que de définir la largeur de body, j'ai choisis de changer la valeur des top,left,margin-top et margin-left de mon conteneur.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--[if lt IE 7]>
		<style type="text/css">
			#contenu {
				position : relative ;
				top : expression(document.body.clientHeight < 610? "5px": "50%" ) ;
				left : expression(document.body.clientWidth < 810? "5px": "50%" ) ;
				margin-top : expression(document.body.clientHeight < 610? "0px": "-300px" ) ;
				margin-left : expression(document.body.clientWidth < 810? "0px": "-400px" ) ;
				height : 600px ;
				width : 800px ;
			}
		</style>
	<![endif]-->

**Er3van** · 06/06/2008, 15h04

Par contre, même si IE8 admettra le display:table, ça ne sera toujours pas le cas de IE 6 et 7, qui représenteront toujours le quart des internautes, au bas mot.

**Candygirl** · 06/06/2008, 16h07

Envoyé par Er3van

Par contre, même si IE8 admettra le display:table, ça ne sera toujours pas le cas de IE 6 et 7, qui représenteront toujours le quart des internautes, au bas mot.

Non, mais le js vient s'occuper du centrage vertical pour les vieux ie (comme c'est le cas actuellement pour IE6 qui a pourtant encore bien des parts de marché) le centrage horizontal étant déjà effectif à l'aide des marges auto:

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centrage vertical</title>
	<style type="text/css">
        html,body {
                width:100%;
                height:100%;
                margin:0;padding:0;
        }
 
 
        html {
                display:table;
        }
 
        body {
                display:table-cell;
                vertical-align:middle;
        }
 
 
        div {
                width:300px;
                background:red;
                margin:0 auto;
                border:1px solid black;
        }
        </style>
 
<!--[if lt IE 8]>
 
  <style type="text/css">
                div {
                        position:relative;
                        top:expression(document.body.clientHeight<=this.offsetHeight ? "0" : (document.body.clientHeight-this.offsetHeight)/2+"px");
                }
        </style>
<![endif]-->
</head>
<body>
	<div id="contenu">Ceci est mon text, mais il faut qu&rsquo;il soit suffisemment long pour que je puisse avoir des retours à la ligne,mais pas trop pour pouvoir s&rsquo;afficher à l&rsquo;écran, quel casse-tête ! Et si vous redimensionnez l&rsquo;écran, hop, je disparais, la preuve, t&rsquo;arrives plus à lire le début hein ?</div>
</body>
</html>

Bien plus souple

**Candygirl** · 06/06/2008, 14h06

Envoyé par Er3van

Mon code me parait bon, même si je suis surpris de devoir placer le min-height dans html, j'aurais cru bon de la placer dans body, mais dans ce cas c'est sans effet, sous FF y compris.

c'est probablement parce que tu as oublié de donner un position:relative au body qu'il devienne la référence pour le positionnement absolu.

Pourquoi redéfinir le width et height quand ils sont déjà définis dans le css de base?

Perso je chercherais à éviter de redéfinir des dimensions dans mon css IE pour faciliter la maintenance. En ce sens ceci me semble moins contraignant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<!--[if lt IE 7]>
	<style type="text/css">
		#contenu {
		  margin:0;
		  top:0;left:0;
		  top:expression(document.body.clientHeight<=this.offsetHeight ? "0" :  (document.body.clientHeight-this.offsetHeight)/2+"px");
		  left:expression(document.body.clientWidth<=this.offsetWidth ? "0" :  (document.body.clientWidth-this.offsetWidth)/2+"px");
		}
	</style>
<![endif]-->

En fait je n'ai que rarement utilisé les marges négatives pour le centrage vertical d'un texte, la hauteur fixe ne me convenant guère. En ce sens j'ai toujours utilisé une cellule de tableau pour le centrage d'une page entière. Depuis l'annonce qu'IE8 supportera enfin les display:table, je pense opter pour cette solution qui ne requière pas de hauteur spécifiée.

min-height et IE

CSS

Vue hybride

Discussions similaires

Partager

Partager