28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Décalage INPUT sur IE, nickel sur Firefox

Bonsoir à tous !

J'ai un petit problème d'alignement sous IE que je n'arrive pas à résoudre.

En fait j'ai placé un INPUT dans un calque, cet INPUT étant destiné à être aussi large que le cadre une fois le bug réglé.

Le problème c'est que le INPUT est systématiquement décalé vers la droite. J'ai essayé de nombreuses manip (margin, padding), j'ai simplifié mon code css, colorisé la div mais rien à faire...

Je vous joint une copie du bug, ainsi qu'un détail du code et du css ! Merci d'avance pour votre coup de pouc e!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="general">
    <div id="formulaire"><input type="text"></div>
  </div>
</body>
</html>


/** DEBUG 

table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen} **/

/** FIN DEBUG **/
*{
margin:0;
padding:0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: center;
	background-color: #857E7E;
}
#general {
	margin:0 auto;
	width: 800px;
	height:400px;
	text-align: left;
	border:solid 5px #ffffff;
	background-image: url(_images/pic_du_midi.jpg);
	overflow: hidden;
}
#formulaire {
	margin-top:120px;
	background-color:#F00;
	margin-left:166px;
	width:400px;
	height:34px;
	float:left;
	padding:0px;
	text-align:left;
}
upload/24335-BugIE.jpg
Modifié par bcanas (10 Oct 2009 - 13:34)
Bonjour,

Après une fausse piste voila le code corrigé Smiley smile . Encore une fois IE est assez capricieux mais cela est un relativement normal vu la sémantique que tu nous as offert. En effet, pour ce cher IE6 un input se doit d'être dans un formulaire.
Voici le code corrigé ci-dessous (j'ai modifié les couleurs de fond pour le debug. A remplacer):

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen">
	/** DEBUG  
 
table {border: 1px solid black} 
td {border: 1px dotted gray} 
div {border: 1px solid orange} 
img, form {border: 1px dashed blue} 
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow} 
ul {border: 1px solid green} 
li {border: 1px solid lightgreen} **/ 
 
/** FIN DEBUG **/ 
*{ 
margin:0; 
padding:0; 
} 
body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #000; 
    text-align: center; 
    background-color: #857E7E; 
} 
#general { 
    margin:0 auto; 
    width: 800px; 
    height:400px; 
    text-align: left; 
    border:solid 5px #ffffff; 
    background: pink;
    overflow: hidden; 
} 
#formulaire { 
    margin-top:120px; 
    background: gray; 
    margin-left:166px; 
    width:400px; 
    height:34px; 
    padding:0px; 
    text-align:left; 
} 
</style>
</head> 
<body> 
  <div id="general"> 
    <div id="formulaire">
    	<form action="" method="get">
    		<fieldset>
    			<input type="text" name="bcanas" value="" />
    		</fieldset>
    	</form>
	</div> 
  </div> 
</body> 
</html>


Bonne journée Smiley cligne
Sujet clos
Aller à