28111 sujets

CSS et mise en forme, CSS3

Max-widh sous IE...

Bonsoir à tous,

Venons en directements au fait, ce fut une soirée de septembre, il fesait sombre ... les feuilles mortes tombaient des arbres, la plui [... ect ...] et soudain j'ouvris cette page : http://www.actu-lan.com/dossier-Coverage_Lan_4_Ever_3-0-75.html sous IE et la ... ce fut le drame !

Sous FF pour ne pas avoir de problèmes avec les images j'utilise le css suivant :

.tbl_presentation .pres_tr img{
  max-width: 549px;
}


et comme IE ne connais pas ça... je place sur la page ce code :

<!--[if IE]>
  <style type="text/css">
    .tbl_presentation .pres_tr img{
    width:expression(document.body.clientWidth > 549 ? "549px" : "auto");
    }
  </style>
<![endif]-->


Problème ... sous IE, une seule image est trop grande, alors Mr applique le css conditionel et redimentionne TOUTES les images et pas seulement la trop grande ...

Comment faire ?
Modifié par pirquessa (02 Sep 2006 - 19:34)
bonsoir et bienvenue pirquessa,

Tu peux peut-être utliser ce javascript : http://www.doxdesk.com/software/js/minmax.html

Ceci dit le résultat serait nul dans IE 5/6 en cas de Javascript désactivé (idem pour la solution que tu tentes ci-dessus). La solution la plus sûre serait de spécifier une largeur aux images trop grandes sans se reposer sur le « max-width »
Modifié par Alan (02 Sep 2006 - 20:53)
Je n'y connais pas grand chose en Javascript, mais il me semble que là tu teste sur la largeur de l'élément body est supérieure à 549px. Et si c'est le cas, tu génère le code "549px" qui vient compléter l'instruction de largeur.

Comme il est très très probable que l'élément body fasse toujours plus de 549px de large, alors c'est comme si tu avais placé un width: 549px pour ta classe d'images dans une feuille de style réservée à Internet Explorer.

D'où le problème...
Alan a écrit :
bonsoir et bienvenue pirquessa,

Tu peux peut-être utliser ce javascript : http://www.doxdesk.com/software/js/minmax.html

Ceci dit le résultat serait nul dans IE 5/6 en cas de Javascript désactivé (idem pour la solution que tu tentes ci-dessus). La solution la plus sûre serait de spécifier une largeur aux images trop grandes sans se reposer sur le « max-width »


Je vois pas trop ou est le JS dans cette page ... j'avais trouvé la solution JS ci dessus mais en fait, des qu'il trouve UNE image trop grande il les rétrécis toutes...

a écrit :
Je n'y connais pas grand chose en Javascript, mais il me semble que là tu teste sur la largeur de l'élément body est supérieure à 549px. Et si c'est le cas, tu génère le code "549px" qui vient compléter l'instruction de largeur.


Hum c'est un code tout pret que j'ai trouvé... ca devrait marcher seul ... je ne m'y connais pas trop non plus.

Alan je veux bien que tu m'explique un peu plus ta solution ... Smiley sweatdrop

Merci de vos réponses
pirquessa a écrit :
Hum c'est un code tout pret que j'ai trouvé... ca devrait marcher seul ... je ne m'y connais pas trop non plus.

Ça marche uniquement pour simuler un max-width sur body ou sur un conteneur global.

Par contre ça ne marchera pas pour certains éléments spécifiques de la page. Le javascript utilisé récupère la largeur de la page (largeur de body), pas celle de l'élément auquel le style est appliqué.
Alan a écrit :
bonsoir et bienvenue pirquessa,

Tu peux peut-être utliser ce javascript : http://www.doxdesk.com/software/js/minmax.html

Ceci dit le résultat serait nul dans IE 5/6 en cas de Javascript désactivé (idem pour la solution que tu tentes ci-dessus). La solution la plus sûre serait de spécifier une largeur aux images trop grandes sans se reposer sur le « max-width »


Génial. Super ça.
Je suis content d'avoir trouvé ce post, après bien des recherches. (le width est mal écrit dans le titre du post, donc mal référencé ce post)

J'ai testé sur mon conteneur général et ça marche plutôt bien. Mais ce n'est pas pour cela que je cherchais quelque-chose.

Je peux donc dire aussi que ce javascript marche aussi pour min-width est très simple d'utilisation (y 'a juste à mettre le script) et marche également pour des min-width et max-width ailleurs qu'en body ou #conteneur, puisque depuis ma galerie photo (issu du tutorial d'alascréation) utilise cela et ça marche très bien avec IE. J'avais eut peur de devoir trouvé autre chose après avoir lut cette remarque :


a écrit :
Ça marche uniquement pour simuler un max-width sur body ou sur un conteneur global.

Par contre ça ne marchera pas pour certains éléments spécifiques de la page. Le javascript utilisé récupère la largeur de la page (largeur de body), pas celle de l'élément auquel le style est appliqué.


Je sais pas si mon cas entre en compte mais je cherchais à afficher de façon différente mes photos verticales et celles horizontales (ou panoramique) dans ma galerie photo.

En mettant cela :

dl#photo img
{margin:0 auto;
	height:98%; 
	padding-top:0.9%;
	padding-right:0.9%;
	padding-left:0.9%;
	padding-bottom:0.9%;
	
	max-width:98%;
}


Et ce javascript, tout à l'air de marcher impec aussi sur IE. Smiley biggrin




En revanche sur Opéra 9, gros soucis, et j'aimerais donc que ce javascript ne s'éxécute que avec IE. Les commentaires conditionnelles je connais avec du css, mais du javascript, aucune idée.
Suite du problème ici : --->
http://forum.alsacreations.com/topic-5-18137-1-Un-javascript-qui-sxcute-que-sous-IE.html#copy
Modifié par Damonya (18 Sep 2006 - 15:30)
Sujet clos
Aller à