28220 sujets

CSS et mise en forme, CSS3

[resolu] Padding qui repete une image background

Bonjour,

Je vous expose mon problème que je rencontre ...

Voici ce que je veux obtenir et qui marche correctement sous Firefox 1.5
http://img390.imageshack.us/img390/7063/ff4dw.png

et voici mon problème sous IE 6 .
http://img390.imageshack.us/img390/9272/ie9fv.png

Alors comme vous le voyez sous ie le div s'agrandit et laisse place à un vide affreux !

Voici mon code correspondant !

Le fichier html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Le titre</title>
<link href="format.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="global">
		<div id="entete">
			<div id="box_connection">
			<form method="post">
				<span class="txt_input">Login :</span> <input type="text" class="input_txt" name="login" />
			</form>
			</div>
		</div>
		<div id="banniere"></div>
		<div id="menu"></div>
		<div id="entete_centre"></div>
		<div id="milieu_centre">test</div>
		<div id="pied_centre"></div>
	</div>
</body>
</html>


la feuille de style "format.css"



html,body {
	background-color:#FFFFFF;
	text-align:left;
	margin:0;
	padding:0;
}

#global {
	width:923px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#entete {
	width:923px;
	height:53px;
	background-image:url(images/Header_01.jpg);
	background-repeat:no-repeat;
}

#banniere {
	width:923px;
	height:202px;
	background-image:url(images/Banniere_02.jpg);
}

#menu {
	width:923px;
	height:40px;
	background-image:url(images/Menu_03.jpg);
}

#entete_centre {
	width:923px;
	height:19px;
	background-image:url(images/ent_centre_04.jpg);
}

#milieu_centre {
	width:923px;
	height:2px;
	background-image:url(images/milieu_centre_05.jpg);
}

#pied_centre {
	width:923px;
	height:45px;
	background-image:url(images/pied_06.jpg);
	clear:both;
}


/* MISE EN FORME DES INPUTS */
.input_txt {
	width:100px;
	height:10px;
	border:1px solid black;
	font-size:10px;
}

.txt_input {
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}
/* ------------------------ */

#box_connection {
	text-align:right;
	padding-right:30px;
	padding-top:18px;
}


Voila esperons que ce soit pas difficille à corriger ..
Merci d'avance de m'expliquer/corriger mon problème.
Modifié par Fijer (14 Jan 2006 - 10:40)
Bonjour,

L'élément form reçoit des marges par défaut différentes selon les navigateurs. Utiliser #box_connection form {margin: 0} pour les annuler.
Excellent, c'etait bien ça ..
Merci pour cette réponse, sujet résolu, j'édite.
Modifié par Fijer (14 Jan 2006 - 10:39)
Sujet clos
Aller à