28172 sujets

CSS et mise en forme, CSS3

[Resolu] Min-width max-width avec IE7

Bonjour,

J'ai un petit soucis dans la mise en place d'un min-width sur le site sur lequel je travaille actuellement fichespedagogiques

Je ne parviens pas, malgré l'article sur alsa à faire en sorte que la taille de ma boite de log s'agrandisse lorsque l'on s'identifie et revienne à sa taille initiale lorsque l'on se délogue. Dis autrement à faire en sorte que la boite prenne la taille de son contenu.

#logArea {
	width:expression(window.document.getElementById("logArea").clientWidth < 320? "500px": "320px");
	}


log : test@fichespedagogiques.com
mdp : testMacG

Y a-t-il quelque chose qu'y m'aurait échappé ?

Merci.
Modifié par webmasterfred (21 Aug 2009 - 16:24)
bonjour,

si je m'en remet au code proposé sur cette page d'alsa, ce n'est pas clairement indiqué

#global {
	/* Si la largeur de BODY est supérieure à 1000px,
	la ramener à 1000px. Sinon, la laisser à "auto". */
	width: expression( document.body.clientWidth > 1000? "1000px": "auto" );
}


Jje vais essayer, sait-on jamais.

Merci
Non, l'ajout de min-width ne change rien à l'affaire. Il me semble qu'il s'agit d'une propriété CSS 2 qui n'est pas implémentée sur IE 7.

Si il existe une autre méthode pour la gestion de ma boite de log, je suis preneur.

Merci
Modifié par webmasterfred (21 Aug 2009 - 14:53)
Salut,

Cette bidouille n'est utile que pour IE6. Comme tu nous dis que tu cherches à faire un min-width sur IE7, pourquoi utilises-tu ce code et pas simplement un min-width ?
webmasterfred a écrit :
Non, l'ajout de min-width ne change rien à l'affaire. Il me semble qu'il s'agit d'une propriété CSS 2 qui n'est pas implémentée sur IE 7.

min-width est tout à fait fonctionnel dans IE7.

Pour une auter solution, y a bien JavaScript, mais ça va être plus compliqué.
Posons donc la question autrement Smiley confus
Comment faire pour que ma boite de log change de taille en fonction de sont contenu. Ce dernier (le contenu) devant tenir sur une ligne ?

Merci
webmasterfred a écrit :
Le min-width ne fonctionne pas sous IE 7.

Si si.

Bien sûr, si tu travailles en mode Quirks, ça pourrait expliquer que certaines nouvelles fonctionnalités d'IE7 ne fonctionnent pas, vu que le mode Quirks dans IE 6, 7 et 8 c'est plus ou moins comme si tu utilisais le moteur de rendu d'Internet Explorer 5.5.

Et, bien entendu, si tu travailles en mode Quirks tu peux ne t'en prendre qu'à toi même, et toi et ta descendance serez maudits jusqu'à la 5.5ème génération. Smiley lol
C'est pour cela que je vous est mis le lien dans mon premier post. Smiley cligne 


#logArea {
float:right;
	background:url(../images/fond-log.png) bottom left no-repeat;
	color:#FFF;
	min-height:30px;
	line-height:2.2em;
	padding-left:10px;
	min-width:280px;
	}






<p id="logArea">
	<a href="achat.php" title="Acheter des unités simplement"><img id="AchatCredits" src="images/achat-unites.png" alt="Achetez des unites" width="124" height="30" /></a>
<a href="login.php" title="S'identifier">S'identifier</a>&nbsp;|&nbsp;<a href="Mon-compte.php" title="Accéder à mon compte">Mon compte</a>
</p>


Merci
webmasterfred a écrit :
Comment faire pour que ma boite de log change de taille en fonction de sont contenu. Ce dernier (le contenu) devant tenir sur une ligne ?

Il y a plusieurs modes de rendu ou comportements en CSS qui permettent de faire ceci. Chacun a d'autres caractéristiques et il n'est pas évident que l'un ou l'autre soit parfaitement adapté à ton cas. Mais, en gros, tu vas faire ton marché dans la liste suivante:

- Positionnement absolu.
- Positionnement flottant.
- Display: table. (Nécessité d'utiliser un tableau HTML pour être compatible IE 6-7.)
- Display: inline-block. (Nécessité d'utiliser display:inline + le HasLayout pour être compatible IE 6-7. Pas compatible avec Firefox 2.)

Je crois que j'ai fait le tour. Dans certains cas, tu auras peut-être besoin de combiner ça avec du white-space: nowrap.
Ayant vu le design et le code de la page:

- L'utilisation d'un min-width me semble tout simplement inutile. Ton bloc est déjà flottant à droite, il s'adaptera à la largeur de son contenu. La seule limite étant la largeur du parent.
- Je n'ai pas testé dans IE 6-7.
- Comme tu as un élément flottant à droite dans un parent flottant, il faudrait surveiller ce bug. Sait-on jamais, c'est peut-être lui qui te cause quelques misères.
Florent V. a écrit :

Si si.

Bien sûr, si tu travailles en mode Quirks, ça pourrait expliquer que certaines nouvelles fonctionnalités d'IE7 ne fonctionnent pas, vu que le mode Quirks dans IE 6, 7 et 8 c'est plus ou moins comme si tu utilisais le moteur de rendu d'Internet Explorer 5.5.

Et, bien entendu, si tu travailles en mode Quirks tu peux ne t'en prendre qu'à toi même, et toi et ta descendance serez maudits jusqu'à la 5.5ème génération. Smiley lol


non pas de basculement en mode quirks à l'horizon (doctype correcte). Effectivement cela aurait été une piste intéressante.
Florent V. a écrit :
Ayant vu le design et le code de la page:
- Je n'ai pas testé dans IE 6-7.
.


Zut, c'est justement de là qu'est mon soucis. Pas de problème avec Safari et FF sous mac et PC.

Merci
Le problème venait effectivement d'une interaction flottant contenu dans un flottant.

Il semblerait que cette configuration annihile la min-width ou max-width. Dans le cas présent pas de soucis de passage en mode quirks. J'avoue que vous m'avez fait douter.

il m'a suffit d'extraire le flottant pour que tout rentre dans l'ordre. Merci Florent pour le link.

Un grand merci à tous celles et ceux qui ont pris de leur temps pour me répondre. Smiley cligne
Modifié par webmasterfred (21 Aug 2009 - 16:21)
Sujet clos
Aller à