Max-width sous IE

salut tout le monde,
c'est possible d'emuler max-width sous IE ?
j'ai utiliser cette expression

width:expression(document.body.clientWidth > 200 ? "200px": "auto");

mais le souci c'est qu'il me fixe tout temps le width a 200px meme si le width de base est plus petit que 200
merci de votre aide

Hello,

Difficile de deviner uniquement avec ces indications.

As-tu suivi ce point de la FAQ ?

Bonjour,

essaye:

<style type="text/css">
#conteneur {
width: 200px;
width:expression(document.body.clientWidth < 202? "200px": "auto" );
} 

En commentaire conditionnel biensûr
Modifié par ghost (05 Jun 2007 - 12:06)

oui c'est ce ue j'ai fait
voici l'element

<div class="item">
   <a target="_blank" class="lecteur_a" href="http://miamourdises.canalblog.com/archives/2007/06/02/5163228.html">
      Crevettes croquantes, sauce à l'abricot
   </a>
   <img style="margin: 5px;" src="http://storage.canalblog.com/47/88/133204/13803804_p.jpg" id="image_4_0"/>
<div class="lecteur_p" id="p_4_0">

      Je n'aime pas les crevettes, ce n'est pas faute d'avoir goûté, je n'aime                                       pas ça, c'est ainsi. Je...</div><div style="clear: both;"/>
</div>

et le style

.item
{
display:table;
}
.item img
{
width:expression(document.body.clientWidth > 230 ? "230px": "10px");
float:left;
}

.le_plus{/*le petit +*/
border:1px solid;
padding-left:2px;
padding-right:2px;
margin-left:10px;
text-decoration:none;
color:gray;

}
.le_plus:hover {
color:white;
cursor:pointer;
background-color:#6699ff;
padding-left:2px;
padding-right:2px;
margin-left:10px;
}

#info
{
font-weight:bold;
text-align:center;
margin-bottom:50px;
margin-top:20px;
}
.item {/*la div qui contient le lien et la description*/
margin-bottom:15px;
}
.lecteur_a{/*le lien*/
background-color:#6699ff;

color:white;
font-family:Verdana;
font-weight:bold;
text-decoration:none;

}
.lecteur_p {/*le cadre qui contient la description*/
background-color:#3399cc;
color:white;
font-family:Verdana;
font-size:14px;
font-weight:bold;
margin-left:15px;
max-width:600px;
padding:5px;
margin-top:2px;
}
.lecteur_p table {
color:white;
font-family:Verdana;
font-size:14px;
font-weight:bold;
max-width:600px;
}

Modifié par hakkou (05 Jun 2007 - 12:19)

ghost a écrit :
Bonjour,

essaye:

<style type="text/css">
#conteneur {
width: 200px;
width:expression(document.body.clientWidth < 202? "200px": "auto" );
} 

En commentaire conditionnel biensûr

desolé je n'avais pas vu ton post
merci de ta reponse,
si j'ai bien compris ton code : si la taille est plus petite que 202 alors je la fixe a 200 c'est bien ca ?

Re,

Oui c'est ça et si js est désactivé, le width reste à 200px, pourquoi 202px ben si on indique 200px ie risque de "planter"

le souci c'est que moi je veux fixer une taille maximale, et ce que tu m'a proposé c'est une taille minimale :s
ce que j'arrive pas a comprendre c'est pourquoi il applique la taille a toute les image ?
si je met

width:expression(document.body.clientWidth > 202? "200px": "auto" );

il devra me reduire que les grande images (> 202) non ?
ba ans mon cas il reduit les grande image et aggrandi les petites

Re,

Oups désolé, je n'avais pas bien lu !!
Tu veux faire quoi exactement car à mon âge, il faut expliquer longtemps

Bonsoir,
Ben c'est pourtant simple... et j'ai exactement le même soucis que hakkou et je relance donc le sujet vu qu'il reste sans réponse et que je ne la trouve pas ailleur encore...

Le problème est qu'on veut donner une taille maximale à l'affichage d'une image. Si je reprends l'exemple de hakkou :
Si une image fait moins de 200px elle garde sa taille normale , si elle fait plus de 200px on la "retaille" à 200px de large.
(c'est bêtement le but le la propriété max-width quand même non ?)

Le pb avec le "hack" width:expression est que moi aussi j'ai les images inférieure à 200px qui sont retaillée à 200px au lieu de garder leur taille d'origine....

Dans mon cas il s'agit d'un forum dont la largeur des posts est fixe (600px) et les personnes sont libres d'afficher des images externe au site (donc aucun controle sur la taille des images possible en php). Si j'applique ce hack, les images trop grande ne bousille plus la mise en page avec IE mais les émoticons 32x32 sont retaillées en 600x600... super... moche...

Je me dit que c'est sûrement le pavé "document.body.clientWidth" qui n'est pas valable pour notre cas (vu que chez moi le body fait 1024px) mais je vois pas quoi utiliser à la place...
Modifié par denice (22 Jun 2007 - 23:02)

denice a écrit :
Le pb avec le "hack" width:expression est que moi aussi j'ai les images inférieure à 200px qui sont retaillée à 200px au lieu de garder leur taille d'origine....

Le hack en question, c'est déclencher une fonction Javascript via la propriété spécifique à IE expression. Bref, c'est du Javascript. À partir de là, autant faire un mini-script qui s'occupera de redimensionner les images trop grandes dans tes pages, sans passer par le CSS et expression (qui est peut-être limité vis-à-vis de ce que tu veux faire).

Donc : faire une recherche sur le redimensionnement d'images à la volée en JS en fonction de paramètres (largeur maximale). Au besoin, et après avoir fait quelques recherches, ouvrir un sujet dans le salon Javascript.

Pour revenir aux CSS :

denice a écrit :
les images trop grande ne bousille plus la mise en page

Un autre moyen pour que les images trop grandes ne bousillent pas la mise en page est d'utiliser overflow: hidden.

Si la zone de contenu est une cellule de tableau, il faudra probablement la doubler par un div prenant toute la largeur de la cellule et en overflow: hidden.

Merci pour ces précisions.

J'avais trouvé une méthode de gorret alternative en mettant le texte du post dans un tableau et utiliser les propriétés table-layout:fixed et width:600px.. ça marchait sous IE6 , FireFox mais Opéra (9.21) tronque l'image sans tronquer le texte

Finallement en rédigeant ce message j'ai trouvé la solution (enfin ma solution en tout cas.. ) comme quoi remettre à plat du code c'est utile parfois

<div class="topic">
  <div class="text_topic"><img src="" /> mon texte.... </div>
  <div class="datepost"></div>    
</div>

.topic {
  float:left; 
  width:650px;
  overflow:hidden;
}
.text_topic {
  padding:8px; 
  text-align:justify;
}
.newbb_thread_comText img {
  max-width:630px; 
}

ça marche sous FF2.x, opéra9.x (image rataillée , texte ok).
IE6 tronque l'image mais le texte est ok).
Voilà.. le pire c'est que c'est tout con au final après avoir essayé des tonnes de truc alambiqués..

Mais merci encore !
Modifié par denice (23 Jun 2007 - 15:44)

La solution retenue me semble très bonne. Si besoin, tu peux aussi décider de n'utiliser le width: 650px; overflow: hidden que pour IE6 (les navigateurs plus récents étant capable d'appliquer le max-width sur l'image), grâce à un commentaire conditionnel.

Pour les commentaires conditionnels, voir la FAQ du forum.

Sinon, si ton problème est résolu, pourrais-tu l'indiquer dans le titre de ton sujet, de la manière suivante : « [Résolu] Titre du sujet » ?
Pour modifier le titre du sujet, il faut éditer le tout premier message (bouton « éditer » en haut à droite).

Edit : ah ben non, c'est pas ton sujet en fait, tu ne pourras pas. C'est le problème quand on poste à la suite d'un sujet existant plutôt que de créer un nouveau sujet (en faisant un lien vers un sujet de référence si besoin...).
Modifié par Florent V. (23 Jun 2007 - 17:05)