Discussion :

[zargeus]

bonjour à tous,

je suis confronté à un soucis css quant a la judicieuse utilisation de max-width et min-width
voici la structure de ma page

code xhmtl

Code html :

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

1
2
3
4
5
6
 
<div id="DivContent4AllArea" style="width:100%; float:left">
  <div class="DivContent4AllAreaColumnRight"> </div>
  <div class="DivContent4AllAreaColumnLeft"> </div>
  <div class="DivContent4AllAreaContent"></div>
</div>

rien de terrible 3 colonne dans un div englobant, celle de contenu doit avoir un largeur dépendante de l'espace que les 2 autres colonnes lui laisse. donc je dois faire varié
(1024-(250+160)) > width >(1600-(250+160))
donc je me dis que min-width:614 et max-width:1190


css FF

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
 
 
*>div.DivContent4AllAreaColumnLeft
{
width:250px 
height:auto; 
float:left;  
display:inline;
}
*>div.DivContent4AllAreaContent
{
min-width:550px;
max-width:1000px;
height:auto;
float:left;
display:inline;
}
 
*>div.DivContent4AllAreaColumnRight
{     
width:160px;
height:auto; 
float:right;  
display:inline; 
}

mais le div prends systématiquement max-width


sous ie pas de soucis, je ne precise rien en width,
css ie, pour info

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
 
* html div.DivContent4AllAreaColumnLeft{ 
width:250px;
height:auto;
float:left;   
display:inline;}
 
* html div.DivContent4AllAreaContent{ 
height:auto;
 float:left;
display:inline; }
 
* html div.DivContent4AllAreaColumnRight{ 
width:160px;
 height:auto; 
float:right;  
display:inline; }

[trotters213]

je ne vois aps où est ton problème étant donné que c'est ta valeur max ???

PS :

• j'adore les noms de tes classes, courts et explicites
• *>div. ne seret à rien dans ton CSS
• évite d'utiliser le hack IE et utilise plutôt les commentaires conditionnels :

  Code HTML :

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

  1
  2
  3
  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

  et dans ton CSS

  Code :

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

  1
  2
  3
  #element {
  width:expression(document.body.clientWidth > 1190 ? "1190px" : "auto");
  }

  équivalent de

  Code :

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

  1
  2
  3
  #element {
  max-width: 1190px;
  }

  sous FF. Je te laisse faire pour le min

[Dan_A]

Par ailleurs, firefox est très sensible aux erreurs de syntaxe (il manque un point-virgule après 250px).

[zargeus]

tout d'abord merci de tes lumières

j'adore les noms de tes classes, courts et explicites

ouep je sias que pour l'exemple j'aurai du faire dnas le plus explicite,

évite d'utiliser le hack IE et utilise plutôt les commentaires conditionnels :

Code :

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

1
2
<!--[if IE]><ul><li style=""> <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]--></li></ul>

bin vi, j'aurai bien aimé me faire des css différentes pour ie et ff mais dans la réalité je ne peux pas faire du link conditionnel car je bosses sur un projet en l'asp.net 2.0 avec thèmes et masterpage imbriquées.
j'ai donc mais 20css qui sont liès à toutes les pages. forcèment j'ai des nom de classes à ralonge

et dans ton CSS

Code :

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

1
2
3
#element {
width:expression(document.body.clientWidth > 1190 ? "1190px" : "auto");
}

équivalent de

Code :

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

1
2
3
#element {
max-width: 1190px;
}

sous FF. Je te laisse faire pour le min

ouep mais la pseduo propriete ":expression" elle fonctionne sous ff?? j'ai comme un doute, c'est pas un peu du IE only çà?

[Bisûnûrs]

ouep mais la pseduo propriete ":expression" elle fonctionne sous ff?? j'ai comme un doute, c'est pas un peu du IE only çà?

Elle ne fonctionne effectivement pas sur Firefox.

La solution de trotters213 était dans le cas où tu faisais deux feuilles de style différentes, une pour chaque navigateur.
Le premier code correspondant donc à IE et le second à Firefox.

[zargeus]

ok,
j'avais mal saisi la différenciation de plateforme.
mais comme je ne peux pas faire de Conditional Comments

tout cela sans compter qu'avec IE7 la majorité des css filters ne sont pas pris en compte.