28173 sujets

CSS et mise en forme, CSS3

BUG/FIREFOX balise <!DOCTYPE html public ...

Bonjour,

J'ai placé sur mon site la balise
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tout en haut de mon code.

J'ai remarqué que cette balise produit un décalage énorme lorsque dans un champs <INPUT on utilise un padding-left.
Le padding-left à pour effet d'agrandir la taille du champs <INPUT>.

En supprimant cette balise <!DOCTYPE plus aucun soucis d'affichage.

Curieusement, Internet Explorer ne semble pas perturber et l'affichage est nickel.

Une idée ?

Mon site www.handilove.com

Cordialement.
Modérateur
Bonjour sonic92 et bienvenue, Smiley smile

Le doctype n'est pas une balise mais une déclaration de document. Smiley cligne

Ceci dit, cette déclaration est obligatoire pour respecter les standards et padding n'est autre que le remplissage d'un élément. Pour affecter une marge, on se sert de margin.

La différence de comportement que tu constates sur IE est dûe au modèle de boîte de Microsoft, qui considère le remplissage comme faisant partie intégrante de la zone de contenu.

PS: N'oublie pas le bouton code pour la mise en forme sur le forum.
koala64 a écrit :
Bonjour sonic92 et bienvenue, Smiley smile

Le doctype n'est pas une balise mais une déclaration de document. Smiley cligne

Ceci dit, cette déclaration est obligatoire pour respecter les standards et padding n'est autre que le remplissage d'un élément. Pour affecter une marge, on se sert de margin.

La différence de comportement que tu constates sur IE est dûe au modèle de boîte de Microsoft, qui considère le remplissage comme faisant partie intégrante de la zone de contenu.

PS: N'oublie pas le bouton code pour la mise en forme sur le forum.


Avec DOCTYPE, border et padding s'ajoutent et c'est pourquoi j'ai un décalage.
Comment faire un champs input avec une image et un padding-left en conservant une taille identique entre Internet Explorer et Firefox ?

Cordialement.
Yves Smiley smile
Modérateur
Tu peux faire ainsi :


[#blue]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/#]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css" media="screen, projection"><!--

		[#blue]body
		{
			font-size: 100%;
			font-family: "Times New Roman", Times, serif;
			padding: 10px;
			margin: 0;
		}
		input
		{
			font-size: .8em;
		}
		#recherche
		{
			background: #FFF url(recherche.gif) 0 0 no-repeat;
			width: 10em;
			height: 1.3em;
			padding-left: 16px;
			border: 1px solid #DDD;
		}
		#submit
		{
			width: 6em;
		}[/#]

		--></style>
		<!--[if IE 6]><style type="text/css" media="screen">

		[#blue]#submit
		{
			height: 1.7em;
		}[/#]

		</style><![ endif]--> [#red]<!-- Sans espace à l'intérieur du endif -->[/#]
	</head>
	<body>

		<form id="form" action="recherche.php" method="post">
			<div>
				<input type="text" size="20" name="recherche" id="recherche" />
				<input type="submit" id="submit" value="Recherche" />
			</div>
		</form>

	</body>
</html>

Modifié par koala64 (17 Oct 2006 - 11:42)
koala64 a écrit :
Tu peux faire ainsi :


[#blue]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/#]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css" media="screen, projection"><!--

		[#blue]body
		{
			font-size: 100%;
			font-family: "Times New Roman", Times, serif;
			padding: 10px;
			margin: 0;
		}
		input
		{
			font-size: .8em;
		}
		#recherche
		{
			background: #FFF url(recherche.gif) 0 0 no-repeat;
			width: 10em;
			height: 1.3em;
			padding-left: 16px;
			border: 1px solid #DDD;
		}
		#submit
		{
			width: 6em;
		}[/#]

		--></style>
		<!--[if IE 6]><style type="text/css" media="screen">

		[#blue]#submit
		{
			height: 1.7em;
		}[/#]

		</style><![ endif]--> [#red]<!-- Sans espace à l'intérieur du endif -->[/#]
	</head>
	<body>

		<form id="form" action="recherche.php" method="post">
			<div>
				<input type="text" size="20" name="recherche" id="recherche" />
				<input type="submit" id="submit" value="Recherche" />
			</div>
		</form>

	</body>
</html>



J'ai essayé mais ça ne fonctionne pas sur Internet Explorer 5.01 et mon site doit être accessible à tous les navigateurs à partir de la version 5 sur IE.

voir le topic que j'ai posté :
http://forum.alsacreations.com/topic-4-18939-1-Pb--positionnement-du-paddingleft-dans-un-champs-ltINPUTgt.html#copy

Cordialement.
Sujet clos
Aller à