18041 sujets

Questions générales et questions de débutants

Max-width / min width sous ie: Quel doctype ?

Bonjour,

Alléchée par le titre de cet article Alsa :

http://www.alsacreations.com/astuce/lire/72-min-width-max-width-min-height-et-max-height-sur-internet-explorer-6.html

et également inspirée par ce post:
http://www.svendtofte.com/code/max_width_in_ie/

J'ai implémenté ce code dans une mise en page, pour laquelle je souhaite une div de largeur fluide, variant entre 800 et 1300px de largeur.

mon code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Design Structure</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	
	<style>
		body {
			width:100%;
			margin:0;
			padding:0;
		}

		div.maxw-1300 {
			border:1px solid red;
			max-width:1300px;
		}

		div.minw-800 {
			border:1px solid orange;
			min-width:800px;
		}
	</style>


	<!--[if lte IE 6 ]>
		<style>
			div.maxw-1300 {
				border:1px solid blue;
				width:expression(document.body.clientWidth > 1300? "1300px": "auto" );
			}

			div.minw-800 {
				border:1px solid green;
				width:expression(document.body.clientWidth < 800? "800px": "auto" );
			}
		</style>
	<![endif]-->

	
	
	
</head>
<body>
	<div id="global" class="maxw-1300">
		<div class="minw-800">
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
			nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
			volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
			ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
			molestie consequat, vel illum dolore eu feugiat nulla facilisis at
			vero eros et accumsan et iusto odio dignissim qui blandit praesent
			luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
			nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
			volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
			ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
			molestie consequat, vel illum dolore eu feugiat nulla facilisis at
			vero eros et accumsan et iusto odio dignissim qui blandit praesent
			luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			Nam liber tempor cum soluta nobis eleifend option congue nihil
			imperdiet doming id quod mazim placerat facer possim assum.

			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
			nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
			volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
			ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
			molestie consequat, vel illum dolore eu feugiat nulla facilisis at
			vero eros et accumsan et iusto odio dignissim qui blandit praesent
			luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
			nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
			volutpat.
			</p>
		</div>
	</div>
</body>
</html>



J'ai utilisé un doctype XHTML1.0 trans. (code valide w3c) car cette application comportera un iframe. le code est ok coté w3c, mais c'est là que le bât blesse:

- Sans doctype, le script fonctionne, sous tous navigateurs : youpi ! tout juste ce dont j'avais besoin Smiley smile

- Avec doctype, aïe ! point de jolie largeur variable sous ie ... et même un joli plantage des ie.

Avez-vous une idée de ce qui peut créer ce blocage ?
Et éventuellement une piste pour faire fonctionner ces scripts prometteurs?

Merci d'avance Smiley smile

MarieZ
Bonjour,

Bizarre ton soucis,

personnellement voici le doctype que j'utilise sans même m'en rendre compte, et qui me pose jamais de soucis sur IE :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Si avec ça, ca fonctionne toujours pas, alors va falloir se renseigner auprès des génies d'internet-explorer Smiley cligne

J'ai toujours une autre solution, si sur les démonstrations, il y'a un lien, ouvre le avec IE, et regarde le doctype utilisé Smiley smile
Modifié par Make In Design (20 Oct 2010 - 12:06)
Bonjour,

Curieux problème en effet Smiley smile
Cependant, il n'est sans doute pas lié, comme je le pensais, au doctype (@Make In Design : j'utilise le même que toi). Voyez plutôt :
En poursuivant mes recherches, j'ai trouvé ceci:

http://www.cssplay.co.uk/layouts/flexible-equal-height.html

Même approche (js indirect pour ie), ET fonctionnel avec un doctype similaire.
la différence ? ici :


* html .minmaxwrap {width: expression(document.body.clientWidth < [b]702[/b]? "700px" : document.body.clientWidth > [b]1102[/b]? "1100px" : "auto");}


La condition ajoute 2px de largeur par rapport aux min et max, et rend le tout fonctionnel.

Je suis bien contente de voir tout cela fonctionner.
Je le serai encore plus si je comprenais: pourquoi ? Smiley sweatdrop
Sujet clos
Aller à