Formulaire décalé sous IE

Gribouille26 · 20 Mai 2005

Bonjour,

J'ai un problème sur cette page.

Sur Firefox, tout va bien, mais sur IE, les inputs du formulaire sur décallés vers la droite !!

J'ai essayé un peu tout les positionnements, mais sans succès.... :huh:

Je pense que peut-être IE ne supporte pas une formulation et qu'il lui faudrait un "hack". Mais ce n'est qu'une supposition....

Sur ce coup, j'ai besoin d'aide, svp.

Merci

Gribouille

enroc · 20 Mai 2005

Salut,

je trouve le graphisme de ce site très simple et très joli, cependant quel dommage que son intégration HTML soit si brutale ! On dirait que c'est la proposition d'un designer, qui n'a pas encore été intégrée en HTML :wacko:

Alors sans répondre à ta question, je te suggererai de refaire ce site en remplaçant chaque image par le texte correspondant, et de créer des parties distinctes telles que "conteneur", "entête", "contenu", "formulaire", "pied de page". Une telle structure est un bond énorme au niveau de l'accessibilité, non seulement pour les utilisateurs handicapés, mais aussi pour les moteurs de recherche, qui ont des mots clé à se mettre sous la dent .

Après en CSS tu remplaces chaque texte par son image correspondante, et tu obtiens la même apparence ! Ce n'est pas si difficile et ce site ne manque pas de ressources à ce sujet ! Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.koolskool-riddim.com/" ><!-- Juste pour que l'exemple marche chez moi -->
<style>
	#header {
  height:250px; /* La taille correspond à la hauteur du logo */
	}
	#header h1 {margin:0}
	#header a {
  background: #74861C url(img/koolskoolform.gif) top center no-repeat;  /* l'image est le logo "entete.gif" */
  display:block; /* Le lien se comporte comme un élément de type bloc */
  height:250px; /* ce qui permet de régler la hauteur */
	}
	#header span {display:none} /* On cache le texte du lien, qui restera accessible sans feuille de style */
</style>
</head>
<body>
<div id="container">
	<!--
	h1 indique qu'il s'agit du titre de ta page
	a permet de faire un logo cliquable
	span est nécessaire pour pouvoir cacher le texte du lien, et ainsi n'afficher que le logo
	-->
	<div id="header"><h1><a href="/" title="Coolskool c'est cool"><span>Coolskool Riddim</span></a></h1></div>
	<div id="content">
  <p>le reste du site</p>
	</div>
</div>
</body>
</html>

Cette technique te permet de garder le design intact, de fournir des mots clés aux moteur de recherche, et garder tout le sens de ta page même en désactivant la mise en page CSS.

Gribouille26 · 20 Mai 2005

Merci, Enroc.

Tu as tout a fait raison, c'est un site basé design. Pas du tout CSS, validation ou accessibilité.... :whistling:

Donc, je réintère ma question:

Quel est la cause de ce décalage entre en Firefox et IE ?

Gribouille

MissMonde · 20 Mai 2005

Bonjour Gribouille,

je pense que c'est .formcontact

il est en position absolue et tu lui as mis des "margin-left" et "margin-top"

il faut mettre uniquement "left" et "top"

Martine

Gribouille26 · 20 Mai 2005

en position absolue et tu lui as mis des "margin-left" et "margin-top"
il faut mettre uniquement "left" et "top"

Martine

<{POST_SNAPBACK}>

Tu es géniale Martine !! :hourra:

Merci beaucoup.

Je n'ai pas l'habitude d'utiliser la position:absolute, et je ne me serai pas doutée que c'était simplement ça... :blush:

Gribouille

enroc · 21 Mai 2005

Euh oui, j'étais un peu à côté de la plaque, scuse Gribouille :fou:

Connexion

Formulaire décalé sous IE

Sujets conseillés

Gribouille26

enroc

Gribouille26

MissMonde

Gribouille26

enroc

Veuillez vous connecter pour commenter

Parcourir

Activité