Discussion :

[seb67110]

Bonjour,

J'ai un problème concernant ie6 et l'attribut min-height de css.
Je suis obligé de l'utiliser et je ne sais pas quoi faire.
Le footer de ma page est décalé vers le haut : http://stoquert.maisons-barberousse....le_mb_firefox/
(seulement sous ie6)

Comment puis-je éviter ce problème ?
Encore merci

le css avec les éléments concernés :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
html, body{
margin:0;
padding:0;
background-color:#CAACCA;
 
}
 
div#conteneur {
position:relative;
width: 940px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
background-color:#E9DDE9;
background-image:url(images/coin_haut_gauche.png);
background-position:top left;
background-repeat:no-repeat;
 
 
}
 
 
div#headerconteneur {
	position:relative;	
	overflow:hidden;
	height: 220px;
	background-image:url(images/coin_haut_droit.png);
	background-position:top right;	
	background-repeat:no-repeat;
	overflow:hidden;
	width:100%;
 
}
div#header{
position:relative;
background-image:url(images/Banniere.png);
background-repeat:no-repeat;
width:910px;
height:205px;
margin:auto;
margin-top:15px;
}
 
div#contenu {
position:relative;
min-height:480px;
margin-top:15px;
 
}
div#corps{
height:auto;
min-height:480px;
margin-left:145px;
margin-right:10px;
margin-bottom:20px;
}
 
div#menu
{
width:120px;
height:300px;
float:left;
margin-left:15px;
}
div#logos{
text-align:center;
}
a img{
border:none;
}
div#footerconteneur{
height:30px;
position:relative;
background-image:url(images/coin_bas_gauche.png);
background-position:bottom left;
background-repeat:no-repeat;
}
div#footer{
position:relative;
	background-image:url(images/coin_bas_droit.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	margin-bottom:0;
	}

Merci d'avance !!

[Palca]

Il me semble qu'IE6 ne reconnait pas le "min-height" mais qu'avec un "height" on a le résultat voulu.

[seb67110]

c'est justement ça mon problème, avec un height, si le contenu dépasse, la hauteur ne s'ajuste pas. J'aimerai faire quelque chose d'extensible...

Encore merci

[clb56]

c'est justement ça mon problème, avec un height, si le contenu dépasse, la hauteur ne s'ajuste pas. J'aimerai faire quelque chose d'extensible...

Encore merci

Pour l'ensemble des navigateurs min-height va bien fonctionner et il ne reste donc qu'à régler le problème pour IE6 suivant la méthode décrite par Palca. Mais évidemment sans venir mettre le bazard pour les autres navigateurs

C'est là que les commentaires conditionnels sont bien utiles.

Donc :

css générale avec l'utilisation de min-height, et, après, petit correctif IE lt IE7, IE less than (plus petit que) IE7 avec la syntaxe suivante :

Code :

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

1
2
3
4
5
6
 
<!--[if lt IE 7]>
<style type="text/css">
// Mettre height pour tous les usages de min-height dans la css principale.
</style>
<![endif]-->

[seb67110]

Bonjour et merci infiniment pour ta réponse !
C'est exactement le genre de truc qu'il me fallait.

Donc si j'ai bien compris, je met le min-height dans le commentaire conditionnel pour ie7 et le height pour IE less than ie7.
Donc je mets mon style principal dans le commentaire pour ie 7, et je rajoute height dans "IE less than ie 7" c'est ça ?

Mais qu'en est-il pour les autres navigateurs ? Vont-ils pomper dans le commentaire d'IE7 ?

Une dernière question : puis-je joindre une feuille de style à travers le commentaire conditionnel ?

Encore merci !!!

[clb56]

Donc si j'ai bien compris, je met le min-height dans le commentaire conditionnel pour ie7 et le height pour IE less than ie7.

Non, non, tu n'as rien à prévoir de spécial pour ie7 qui interprète parfaitement min-height, donc ta feuille de style principale pour tous navigateurs (avec min-height) suffira...

Juste le correctif lt IE7 en commentaire conditionnel, avec height en remplacement.