5568 sujets

Sémantique web et HTML

Résolu Decallage entre FF et IE7 pour des img et input

Bonsoir à tous,
Désolé pour le titre. Je le trouve pas du tt explicite, enfin bon.

Alors voilà, je débute en tout mais je progresse vite Smiley cligne et je rencontre qq difficultées pr coder pr IE7 (c'est horrible)

Donc mon pb est simple: que faire sur ce code pour avoir une présentation presque identique entre FF et IE 7 (et 6 aussi olala le casse tête). Il rest qq callages sur FF mais l'esprit est bon

Merci de votre aide à vous les pros Smiley cligne 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon compte</title>
<style>

div#mon_compte
{
	width: 151px;/*largeur de la bote mon compte*/
	height: 102px;/*hauteur de la boite mon compte*/
	border:  1px solid #cccccc;/*bordure grise de la boite*/
	padding: 10px;/*marge interne à la boite de 10 pixels*/
	margin: 10px;/*marge extérieure de la boite de 10 pixels*/
	font-size:8px;
	color:#333333;
	text-align:center;
}

div#mon_compte a
{
font-size:9px;
color:#333333;
text-decoration:none;
}

div#mon_compte a:hover
{
font-size:9px;
color:#333333;
text-decoration:underline;
}

.class_input
{
	font-family:"arial",verdana, Trebuchet MS, sans-serif;/*police pour input*/
	font-size:9px;/*taille police input*/
	text-align:right;/*texte aligné à droite*/
	background-color:#ffffff;/**/
	color:#999999;
	padding:0px;
	margin-top: 5px; /*margin entre les 2 input de mon compte*/
}

img
{
padding: 4px;
}
</style>


</head>

<body>
<div id="mon_compte"><img src="http://img398.imageshack.us/img398/1027/moncomptezi9.jpg" alt="" />
<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
<form action="" method="post" id="connex" >
<input type="hidden" name="action" value="connexion" />
<input name="email" type="text" class="class_input" size="26" maxlength="30" value="Votre adresse email" />
<input name="motdepasse" type="text" class="class_input" size="26" maxlength="30" value="Votre mot de passe" />
<!--<a href="javascript:document.getElementById('connex').submit()"><img src="" /></a>-->
<br />
<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
<a href="" title="Inscrivez vous sur">S'inscrire </a>&nbsp;
<a href="" title="Retrouvez votre mot de passe">Mot de passe oublié?</a></form>
</div> 
</body>
</html>

Modifié par epock29 (29 Jul 2007 - 20:12)
Bonjour epock29,

Pour l'espace que provoque IE, il faudrait que tu mettes
margin: 0;

à 
form


Pour donner le même aspect à tes 
input

rajoute
border: 1px solid #A7A6AA;

à
.class_input


Pour supprimer le décalage entre tes
input

supprime le
<br />
Salut,

et comme le dit blue, profites-en pour mettre de label à tes champs, l'accessibilité n'en sera que meilleure.
Merci Blue pour tes conseils (une fois de plus). J'essaie tt ça cette apreme. Smiley smile

et oki pour le label je vais voir cela. Je vous tiens au courant.
Administrateur
epock29 a écrit :
ça marche nikel chrome (2eme post résolu par Blue pr moi) Smiley smile

Bravo,

N'oublies pas de marquer ton sujet comme [Résolu], tu devrais en avoir l'habitude maintenant Smiley cligne
Modifié par Raphael (29 Jul 2007 - 19:51)
Bonjour a tous, cela fait plusieurs fois que je viens sur ce forum en tant qu'anonyme suite à une recherche sur google. J'ai donc décidé de m'y inscrire pour poser un petit problème CSS avec FireFox

j'applique la classe btuser sur un bouton de type input:

.btuser{
border-Left-Color:Transparent;
color:blue;
font-weight:bold;
font-size:10pt;
background-image:url(../images/bt_user.gif);
background-repeat:no-repeat;
width:30px;height:21px;
cursor:pointer;
line-height:15px;
text-align:right;
}


le résultat est identique sur les 2 navigateurs IE et FF sauf l'alignement du texte à droite qui n'est pas effectif sous FF.

Ex:
http://img183.imageshack.us/img183/8905/inpunttextaligncn1.gif
Modifié par jparia (31 Aug 2007 - 10:30)
Salut,

jparia :
Merci d'ouvrir ton propre sujet pour ne pas polluer celui d'un autre membre.

Par ailleurs, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modifié par Mikachu (31 Aug 2007 - 10:27)
J'ai trouvé une solution:

ajouter:

padding:0px


pour FF

pour quelle raison obscure???

Merci tout de même Smiley cligne
Modifié par jparia (31 Aug 2007 - 10:33)
Sujet clos
Aller à