min-width sous ie7

**suzyspeedfire** · 18/09/2007, 23h31

Bonjour,
Je n'arrive pas à réaliser mon design 'fluide' (composé de 3 colonnes, les 2 extremitées étant de taille fixe et celle du contenu central étant fluide): le min-width se comporte anormalement sous ie7 (correct sur firefox)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<body>
<div class='page' style='width:95%;min-width:770px;margin:auto'>
<div class='navmenu' style='float:left;width:100px'></div>
<div class='headlines' style='float:right;width:100px'></div>
<div class='content' style='margin-left:100px;margin-right:100px'>
<table></table>
</div>
</div> // page
</body>

- lorsque je réduit la taille de la fenêtre du client ie7 la div 'page' se fige correctement sur sa dimension min de 770px mais ... la div 'headlines' se décroche alors de son alignement complètement à droite de son contenant 'page' et suit à droite la diminution de la fenêtre. (sous firefox tout se passe de façon attendue)

- impossible d'avoir une largeur de tableau dans la div 'content' prenant toute la largeur possible. Si je tente de placer un width: 100% sur la balise <table> ie7 met un tableau de largeur ... égale à la page et si je force un display: block au tableau, ie7 ignore la propriété.

Y a t-il une raison aux comportements différents de ces deux clients sur un sujet aussi simple et primordiale ? Un design 'fluide' peut il être correctement conçu sur ces deux clients ?

merci ^^

**onirisme** · 19/09/2007, 06h46

Bonjour, j'ai pas ie7 alors peux pas tester.

Commence par ça (je sais pas si ça vient de là ...)
Remplace :

Code :

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

1
2
3
4
 
min-width=770px
et...
width=100px'

par

Code :

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

1
2
3
4
 
min-width : 770px
et...
width : 100px

**suzyspeedfire** · 19/09/2007, 08h43

Envoyé par onirisme

Bonjour, j'ai pas ie7 alors peux pas tester.

Commence par ça (je sais pas si ça vient de là ...)
Remplace :

Code :

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

1
2
3
4
 
min-width=770px
et...
width=100px'

par

Code :

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

1
2
3
4
 
min-width : 770px
et...
width : 100px

Merci pour ta réponse onirisme

c'est une erreur que j'ai commise en écrivant le code dans mon message (qui est maintenant rectifié).
Cependant chez moi le code est bien semblable à ce que tu indique, alors la question reste entière !

**onirisme** · 19/09/2007, 09h37

Bon...

Dis moi si cette page correspond à tes attentes - TEST

Test sur IE -
Le shema doit t'il resembler à ça? Si non, il y a un problème parce que ça correspond au code de ton style.

Lorsque tu postes un message, essaye de mettre un minimum en forme -

Difficile de se rendre compte sans texte ni formatage...

Après test, dis moi si c'est bon

**suzyspeedfire** · 19/09/2007, 11h16

merci onirisme de ton attention,
je vais étudier la source de ton lien pour te dire s'il me convient (je suis au boulot et je suis sous firefox et ie6, donc je ne peux pas tester le résultat ie7 tout de suite)

En attendant, ci dessous j'ai fais un effort pour reproduire au mieux ma situation. Ce type de design est pourtant basique.
NB: j'arrive à avoir ce que je veux exactement avec ff et presque avec ie7, mais chaque solution ne fonctionne pas avec l'autre...

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
 
<html>
<head>
<style type="text/css">
BODY {
	text-align: center; margin: 0; padding: 0;
	FONT-SIZE: 0.75em;COLOR: #555;FONT-STYLE: normal;	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color : #ccc;}
div#page {
	width: 95%;	min-width: 770px; max-width: 1100px;
	margin: auto;
	background-color:#FFFFFF; background-image:url(../images/pd_bgdroit.gif);}
div#header {
	background-color : burlywood;}
div#header p {margin: 0 0 0 0;}
div#navbar	{
	float: left; width: 150px;
	background-color : lightblue;}
div#headlines	{
	float: right; width: 200px;
	background-color : khaki;}
div#content	{
	margin-left: 150px; margin-right: 200px;}
div#footer	{
	clear: both;
	background-color : burlywood;}
 
table, td {border: 1px solid gray; border-collapse:collapse}
 
</style>
 
 
</head>
<body>
<div id="page">
<div id="header">
<h1>banniere du site</h1>
<p>DIV header: </p>
</div>
<div id="navbar">
<p>DIV navbar: float:left; width:150px</p>
<ul>
<li>menuv1</li>
<li>menuv2</li>
<li>menuv3</li>
</ul>
</div>
<div id="headlines">
<p>DIV headlines: float: right; width: 180px;<br /> cette DIV doit toujours &ecirc;tre align&eacute;e &agrave; droite de son contenant p&egrave;re (div page)</p>
</div>
<div id="content">
		<h1>Titre de la page</h1>
		<p>Contenu 'fluide' de la page, DIV 'content': margin-left: 160px; margin-right: 200px;</p>
		<h3>Un paragraphe au hasard: </h3>
        <p>Obligations réglementaires des propriétaires d’immeubles bâtis<br />
        Éléments d’information relatifs au dispositif réglementaire concernant la protection de la population contre les risques liés à l’amiante dans les immeubles bâtis</p>
        <h3>Un tableau que je voudrais 'fluide' (colonnes extensibles), qui prendrait toute la largeur disponible et qui serait align&eacute; au centre de la page</h3>
		<table>
		<tr><td>Cellule 1.1</td><td>Cellule 1.2</td><td>Cellule 1.3</td></tr>
		<tr><td>Cellule 2.1</td><td>Cellule 2.2</td><td>Cellule 2.3</td></tr>
		<tr><td>Cellule 3.1</td><td>Cellule 3.2</td><td>Cellule 3.3</td></tr>
		</table>
		<p>FF g&egrave;re correctement la r&eacute;duction de page au niveau de la div headlines qui se fixe une fois la min-width atteinte. Par contre IE7 fixe bien le parent de la div headlines (la div page) sur la min-width mais il continue &agrave; pousser la div headline si on r&eacute;duit encore la fen&ecirc;tre</p>
		<p>Pour le tableau: comment avoir une taille max, align&eacute;e au centre  aussi bien sous IE7 et FF ? </p>
</div>
<div id="footer">
<p>Pied de page classique, DIV footer: clear: both;</p>
</div>
</body>
</html>

En testant cette page avec ie7 et ff on se rendra compte tout de suite que l'écart constaté dans le comportement ne peut être accepté.
Avec ie7: ma div#headlines se ballade comme si le min-width de son père n'était pas pris en compte.
Avec ff: le tableau n'est pas aligné au centre;
Avec ff et ie7: le tableau ne prend pas toute la largeur disponible. Si je tente un width=100% sur le tableau alors ie7 lui attribut la largeur de son grandpère (donc beaucoup trop grand !). J'ai tenté un display:block; sur le table, ça marche avec ff (taille=100%) ... mais pas avec ie7.

**suzyspeedfire** · 19/09/2007, 11h40

ok onirisme, j'ai testé ta solution sur ff et ie6,
comme prévu le <table width=100%> fonctionne bien sur ff et trés mal sur ie6 (ie6 attribue au tableau les 100% de la largeur du grandpère, à savoir la div#page; ie7 aussi car j'ai essayé cette solution hier soir chez moi).
Je crois que pour les % ie recherche le premier parent dont la taille a été fixé et dans mon cas de design 'fluide' tout l'objectif est de ne pas fixer la taille du div#content, d'où le fait que ie remonte au grandpère.

- en "fixant" le père (div#content) avec width:100% alors ça marche avec ie6,ie7 et ... ça ne marche plus avec ff !

**suzyspeedfire** · 19/09/2007, 12h19

Je vous fais part de mes avancées: je suis tombée sur le bug du haslayout de IE:

J'ai cru comprendre que "haslayout" c'était bien de l'être un petit peu mais pas trop et que pour l'être il fallait être aussi petit que peu (taille 1% voir zéro).

Toujours est-il que pour ff et ie6 (on verra ce soir pour ie7) voici la page que je désire qui fonctionne avec ces deux clients:

Ce qui a changé:
- Présence d'un commentaire conditionnel dans le <head>

Code :

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

1
2
3
4
5
6
7
<!--[if IE]>
<style type="text/css">
#content{
height:1%;
}
</style>
<![endif]-->

- définition de la largeur du tableau directement dans la balise table

Code :

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

<table width=100%>

Voici la page corrigée complète:

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
<html>
<head>
<style type="text/css">
BODY {
	text-align: center; margin: 0; padding: 0;
	FONT-SIZE: 0.75em;COLOR: #555;FONT-STYLE: normal;	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color : #ccc;}
div#page {
	width: 95%;	min-width: 770px; max-width: 1100px;
	margin: auto;
	background-color:#FFFFFF; background-image:url(../images/pd_bgdroit.gif);}
div#header {
	background-color : burlywood;}
div#header p {margin: 0 0 0 0;}
div#navbar	{
	float: left; width: 150px;
	background-color : lightblue;}
div#headlines	{
	float: right; width: 200px;
	background-color : khaki;}
div#content	{
	margin-left: 150px; margin-right: 200px;
	}
div#footer	{
	clear: both;
	background-color : burlywood;}
 
table, td {border: 1px solid gray; border-collapse:collapse;}
 
</style>
 
<!--[if IE]>
<style type="text/css">
#content{
height:1%;
}
</style>
<![endif]-->
 
</head>
<body>
<div id="page">
<div id="header">
<h1>banniere du site</h1>
<p>DIV header: </p>
</div>
<div id="navbar">
<p>DIV navbar: float:left; width:150px</p>
<ul>
<li>menuv1</li>
<li>menuv2</li>
<li>menuv3</li>
</ul>
</div>
<div id="headlines">
<p>DIV headlines: float: right; width: 180px;<br /> cette DIV doit toujours &ecirc;tre align&eacute;e &agrave; droite de son contenant p&egrave;re (div page)</p>
</div>
<div id="content">
		<h1>Titre de la page</h1>
		<p>Contenu 'fluide' de la page, DIV 'content': margin-left: 160px; margin-right: 200px;</p>
		<h3>Un paragraphe au hasard: </h3>
        <p>Obligations réglementaires des propriétaires d’immeubles bâtis<br />
        Éléments d’information relatifs au dispositif réglementaire concernant la protection de la population contre les risques liés à l’amiante dans les immeubles bâtis</p>
        <h3>Un tableau que je voudrais 'fluide' (colonnes extensibles), qui prendrait toute la largeur disponible et qui serait align&eacute; au centre de la page</h3>
		<table width=100%>
		<tr><td>Cellule 1.1</td><td>Cellule 1.2</td><td>Cellule 1.3</td></tr>
		<tr><td>Cellule 2.1</td><td>Cellule 2.2</td><td>Cellule 2.3</td></tr>
		<tr><td>Cellule 3.1</td><td>Cellule 3.2</td><td>Cellule 3.3</td></tr>
		</table>
		<p>FF g&egrave;re correctement la r&eacute;duction de page au niveau de la div headlines qui se fixe une fois la min-width atteinte. Par contre IE7 fixe bien le parent de la div headlines (la div page) sur la min-width mais il continue &agrave; pousser la div headline si on r&eacute;duit encore la fen&ecirc;tre</p>
		<p>Pour le tableau: comment avoir une taille max, align&eacute;e au centre  aussi bien sous IE7 et FF ? </p>
</div>
<div id="footer">
<p>Pied de page classique, DIV footer: clear: both;</p>
</div>
</body>
</html>

Epatant, ça marche ! Enfin je suis inquiète pour la suite ... car je peux m'attendre désormais à devoir gerer l'irrationnel

Et puis il reste à savoir comment en php je vais pouvoir coder un commentaire optionnel html !

min-width sous ie7

CSS

Discussions similaires

Partager

Partager