Problème de CSS avec IE

luc45 · 31 Août 2006

Je réalise une page avec un code épuré contenant un div qui me sert de conteneur et des span pour positionner mes différents éléments dans cette page, tous les positionnement étant réaliser en absolu dans une feuille css. il y a deux formulaires, ceux-ci s'affiche parfaitement dans tous les navigateurs sauf dans IE ou ils refusent obstinément d'apparaître.

Les formulaires sont de type

<label class="truc"> qui me permet le positionnement

</label>

...

</form>

Si quelqu'un à une idée je bute la dessus depuis hier soir, merci d'avance

J'hésite à mettre l'adresse de la page, le site étant actuellement confidentiel... j'espérait que quelqu'un avait déjà rencontrer un problème équivalent. mais si quelqu'un se sent d'attaque pour m'aider je lui donnerais l'adresse par mail.

Modifié 31 Août 2006 par luc45

Imperatrice · 31 Août 2006

Tu peux donner le lien de ta page en question STP ?

Ou recopier les codes html et css ?

Antoine Cailliau · 31 Août 2006

Il faudrait sans doute voir le code CSS qui va avec.

Aussi, sache qu'il n'est pas conseillé de tout positionner en absolu, et d'abuser des balises <span>.

edit: grillé :?

Modifié 31 Août 2006 par Antoine Cailliau

luc45 · 31 Août 2006

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>[Edité]</title>
		<link href="biblio.js">
		<link href="styleentete.css" rel="stylesheet" type="text/css" media="all">
	</head>

	<body style="center" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<center>
		<div class="fond">
		<img class="rectangle" src="images_interface/rectangleentete.jpg" alt="" width="970" height="137" border="0">
		<img src="images_interface/logobeta.gif" class="logo[Edité]" alt="" width="197" height="131" border="0">
		<span class="quote1">“</span>
		<span class="textentete1">[Edité]</span>
		<span class="textentete2">[Edité]</span>
		<span class="euro">[Edité]</span>
		<span class="quote2">”</span>
		<img class="zonedesaisie" src="images_interface/espaceconnection.gif" alt="" width="149" height="126" border="0">
		<form id="connection" action="#" method="GET" name="FormName">
			<label for="email" class="formemail">
				<input class="inputmail" id="input1" type="text" name="email" value="votre email ici" size="17" tabindex="0">
			</label></br>
			<label for="email" class="formpassword">
				<input class="inputmail" id="input2" type="password" name="password" value="aaaaaa" size="17" tabindex="1">
			</label></br>
			<label for="validez" class="formokbutton">
				<input type="image" src="images_interface/boutonokconnection.gif" alt="" border="0">
			</label>
		</form>
		<span class="texteespace">[Edité]</span>
		<span class="lienoubli"><a href="#" class="lien">[Edité]</a></span>
		<img class="filet" src="images_interface/filetrose.gif" alt="" width="970" height="4" border="0">
		<a href="#"><img class="blocCCM" src="images_interface/bloccommentcamarche.gif" alt="" width="259" height="279" border="0"></a>
		<span class="titrageCCM">[Edité]</span>
		<span class="titrage2CCM">[Edité]</span>
		<span class="texteCCM">[Edité]</span>
		<span class="lienplusdinfos"><a href="#" class="lien">[Edité]</a></span>
		<img class="blocDE" src="images_interface/blocdernierechange.gif" alt="" width="259" height="279" border="0">
		<span class="titrageDE">[Edité]</span>
		<span class="titrage2DE">[Edité]</span>
		<span class="lienrecherche"><a href="#" class="lien">[Edité]</a></span>
		<form id="recherche" action="#" method="GET" name="Formrecherche">
			<label for="motcle" class="formmotcle">
				<input class="inputmail" type="text" name="recherche" value="titre" size="29" tabindex="3">
			</label>
			<label for="lancer" class="loupe">
				<input type="image" src="images_interface/boutonloupe.gif" alt="" border="0">
			</label>
		</form>
		<table width="246" border="0" cellspacing="0" cellpadding="0" class="tableauimage">
			<tr align="center" valign="top" height="60">
		<?php

			$image[1]="0054391570420.jpg";
			$image[2]="5050734001922.jpg";
			$image[3]="0054391570420.jpg";
			$image[4]="5050734001922.jpg";
			$image[5]="0054391570420.jpg";
			$image[6]="5050734001922.jpg";
			$image[7]="0054391570420.jpg";
			$image[8]="5050734001922.jpg";
			for ($i=1;$i<9;$i++)
				{
				if ($i<5)
					{?>
					<td height="60"><a href="#"><img src="images_apache/<?php echo $image[$i];?>"  class="imagepochette" height="50" width="50" border="2"></a></td>	
					<?php
					}
				else
					{					
					if ($i==5)
						{?></tr>
					<tr align="center" valign="top" height="60">
					<?php }?>
					<td height="60"><a href="#"><img src="images_apache/<?php echo $image[$i];?>"  class="imagepochette" height="50" width="50" border="2"></a></td>	
					<?php
					}
				}
		?>
			</tr>
		</table>
		<img class="blocAcces" src="images_interface/blocacces.gif" alt="" width="258" height="279" border="0">
		<span class="titrageAcces">[Edité]</span>
		<span class="titrage2Acces">[Edité]</span>
		<span class="texteAcces">[Edité]</span>
		<a href=#><img class="boutonAcces" src="images_interface/boutonacces.gif" border="0"></a>
		<span class="groupe">
		<?php
			$groupe[1]="[Edité]";
			$groupe[2]="[Edité]";
			$groupe[3]="[Edité]";
			$groupe[4]="[Edité]";
			$groupe[5]="[Edité]";
			$groupe[6]="[Edité]";
			$groupe[7]="[Edité]";
			$groupe[8]="[Edité]";
			$groupe[9]="[Edité]";
			$groupe[10]="[Edité]";
			$groupe[11]="[Edité]";
			$groupe[12]="[Edité]";
			$groupe[13]="[Edité]";
			$groupe[14]="[Edité]";
			$groupe[15]="[Edité]";
			$groupe[16]="[Edité]";
			$groupe[17]="[Edité]";
			$groupe[18]="[Edité]";
			$groupe[19]="[Edité]";
			$groupe[20]="[Edité]";
			$groupe[21]="[Edité]";
			$groupe[22]="[Edité]";
			$groupe[23]="[Edité]";
			$groupe[24]="[Edité]";
			$groupe[25]="[Edité]";
			$groupe[26]="[Edité]";
			$groupe[27]="[Edité]";
			$groupe[28]="[Edité]";
			$groupe[29]="[Edité]";
			$groupe[30]="[Edité]";
			$groupe[31]="[Edité]";
			$groupe[32]="[Edité]";
			$note[1]="3";
			$note[2]="1";
			$note[3]="4";
			$note[4]="3";
			$note[5]="4";
			$note[6]="1";
			$note[7]="4";
			$note[8]="3";
			$note[9]="4";
			$note[10]="2";
			$note[11]="2";
			$note[12]="3";
			$note[13]="2";
			$note[14]="2";
			$note[15]="2";
			$note[16]="3";
			$note[17]="1";
			$note[18]="3";
			$note[19]="4";
			$note[20]="2";
			$note[21]="4";
			$note[22]="3";
			$note[23]="1";
			$note[24]="4";
			$note[25]="4";
			$note[26]="4";
			$note[27]="1";
			$note[28]="1";
			$note[29]="4";
			$note[30]="1";
			$note[31]="2";
			$note[32]="4";
			for ($i=1;$i<33;$i++)
				{?>
				<a href="#" class="groupe<?php echo $note[$i];?>"><?php echo $groupe[$i];?></a>
				<?php
				if ($i<32) {?>    <?php }
				}
		?></span>
		<img src="images_interface/rectanglepied.gif" class="pied" alt="" width="970" height="39" border="0">
		<span class="textpied">
		<a href="#" class="lien">[Edité]</a>  -  <a href="#" class="lien">[Edité] ?</a>  -  <a href="#" class="lien">[Edité]</a>  -   <a href="#" class="lien">[Edité]</a>  -  <a href="#" class="lien">[Edité]</a>  -  <a href="#" class="lien">[Edité]</a>  -  <a href="#" class="lien">[Edité]</a></span>
		<span class="droits">[Edité]</span>
		</div>
		</center>
	</body>

</html>

la feuille de style

body    { color: black; background-color: #f3f3f3; text-align: center }
a { text-decoration: none }
a:hover   { color: #39f; font-family: Arial, "Arial Narrow" }
.lien       { color: #eb3485; font-size: 10px; font-family: Arial, "Arial Narrow"; text-decoration: underline }
.fond     { background-color: white; background-image: url("images_interface/fondblanc.gif"); text-align: center; margin: 0; position: relative; top: 0; left: 0; width: 970px; height: 690px }
.rectangle   { position: absolute; top: 0; left: 0 }
.logo[Edité]       { position: absolute; top: 0; left: 40px }
.quote1    { color: #eb3485; font-size: 45px; font-family: "Times New Roman"; font-weight: bolder; position: absolute; top: 26px; left: 295px }
.textentete1   { color: #eb3485; font-size: 32px; font-family: Arial; font-weight: normal; position: absolute; top: 32px; left: 320px }
.euro { color: #eb3485; font-size: 32px; font-family: Arial; font-weight: normal; position: absolute; top: 68px; left: 590px }
.textentete2    { color: #eb3485; font-size: 28px; font-family: Arial; font-weight: normal; position: absolute; top: 72px; left: 320px }
.quote2   { color: #eb3485; font-size: 40px; font-family: "Times New Roman"; font-weight: bold; position: absolute; top: 66px; left: 630px }
.zonedesaisie    { position: absolute; top: 0; left: 745px }
.texteespace   { color: #eb3485; font-size: 12px; font-family: Arial; position: absolute; top: 4px; left: 776px }
.formemail    { clear:both; font-family: Arial; background-image: none; background-repeat: no-repeat; display: block; position: absolute; top: 24px; left: 766px; height: 100% }
.formpassword   { font-family: Arial; background-image: none; background-repeat: no-repeat; display: block; position: absolute; top: 52px; left: 766px; height:100% }
.inputmail       { color: white; font-size: 10px; line-height: 8; background-color: transparent; background-repeat: no-repeat; visibility: visible; cursor: text; display: block; border: 0 transparent; widht: 20px }
.formokbutton   { font-family: Arial; position: absolute; top: 74px; left: 842px }
.lienoubli   { font-family: Arial; position: absolute; top: 100px; left: 767px }
.filet  { position: absolute; top: 140px; left: 0 }
.blocCCM   { position: absolute; top: 170px; left: 73px }
.titrageCCM      { color: white; font-size: 24px; font-family: Arial; font-weight: bold; position: absolute; top: 175px; left: 145px }
.titrage2CCM  { color: white; font-size: 20px; font-family: Arial; position: absolute; top: 198px; left: 145px }
.texteCCM     { color: white; font-size: 12px; font-family: Arial; font-weight: 600; line-height: 36px; text-align: left; position: absolute; top: 230px; left: 133px }
.lienplusdinfos   { font-family: Arial; position: absolute; top: 420px; left: 148px }
.blocDE   { position: absolute; top: 170px; left: 353px }
.titrageDE      { color: white; font-size: 20px; font-family: Arial; position: absolute; top: 176px; left: 440px }
.titrage2DE { color: white; font-size: 24px; font-family: Arial; font-weight: bold; position: absolute; top: 194px; left: 423px }
.tableauimage   { color: white; font-size: 20px; font-family: Arial; position: absolute; top: 229px; left: 359px }
.imagepochette  { border-width: 2pt; border-color: white }
.formmotcle    { font-family: Arial; background-image: none; background-repeat: no-repeat; display: block; position: absolute; top: 377px; left: 370px ; height:100% }
.lienrecherche     { font-family: Arial; position: absolute; top: 352px; left: 373px }
.loupe    { position: absolute; top: 371px; left: 568px }
.blocAcces   { position: absolute; top: 170px; left: 635px }
.titrageAcces      { color: white; font-size: 24px; font-family: Arial; font-weight: bold; position: absolute; top: 175px; left: 680px }
.titrage2Acces { color: white; font-size: 20px; font-family: Arial; position: absolute; top: 198px; left: 708px }
.texteAcces      { color: white; font-size: 12px; font-family: Arial; font-weight: normal; line-height: 16px; text-align: center; position: absolute; top: 235px; left: 668px }
.boutonAcces   { position: absolute; top: 335px; left: 645px }
.groupe1  { color: #eb3485; font-size: 12px; font-family: Arial, "Arial Narrow" }
.groupe2 { color: #eb3485; font-size: 14px; font-family: Arial, "Arial Narrow" }
.groupe3 { color: #eb3485; font-size: 18px; font-family: Arial, "Arial Narrow" }
.groupe4 { color: #eb3485; font-size: 24px; font-family: Arial, "Arial Narrow" }
.groupe     { line-height: 30px; text-decoration: none; text-align: justify; position: absolute; top: 470px; left: 60px; width: 875px; outline: none medium }
.pied   { position: absolute; top: 630px; left: 0 }
.textpied      { color: #eb3485; text-align: center; position: absolute; top: 640px; left: 0; width: 970px }
.droits  { color: gray; font-size: 10px; font-family: Arial; text-align: center; position: absolute; top: 673px; left: 0; width: 970px }

[Edit captain_torche :] Comme le dit Antoine, merci d'utiliser les balises CODE (pour de courts extraits de code) et CODEBOX (dans le cas d'un code long comme celui-là). Tu augmenteras tes chances de réponse.

Antoine Cailliau · 31 Août 2006

Utilise les balises [code ][/code ] sans les espaces et donne nous uniquement les parties qui posent problème (et/ou donne nous une page en ligne). Tu augmenteras ainsi tes chances de réponse

Imperatrice · 31 Août 2006

Utilise les balises [code ][/code ] sans les espaces et donne nous uniquement les parties qui posent problème (et/ou donne nous une page en ligne). Tu augmenteras ainsi tes chances de réponse

j'allais le dire

luc45 · 31 Août 2006

La page en ligne est actuellement <edit:dan, à la demande de l'auteur>

si vous regarder la page sous firefox puis sous IE le problème sera évident.

pour des raison de confidentialité je supprimerais ce post dès que j'aurais une réponse

merci

Imperatrice · 31 Août 2006

il y a deux formulaires, ceux-ci s'affiche parfaitement dans tous les navigateurs sauf dans IE ou ils refusent obstinément d'apparaître.

Perso, j'affiche la seule différence d'affichage que je vois entre firefox et IE, c'est simplement la mention "votre email ici" (formulaire espace membre) qui n'apparait pas sous IE.

Le reste s'affiche sans problème.

luc45 · 31 Août 2006

Dans IE, je ne peux pas saisir quelque chose dans les formulaires alors que dans Firefox je n'ai pas de soucis, j'ai modifié la page qui était en lige le problème te paraîtra plus évident.

le code source que j'avais fournis n'étais pas celui en ligne maintenant c'est le cas, j'utilise IE 6.0.2xxx

PhY · 31 Août 2006

en tous cas, ça ne vient pas des formulaires, je viens de prendre les codes et ils d'affichent correctement dans les 2 navigateurs... Je continue à chercher... Peut-être au niveau des div ?

Edit: ça vient de l'image, sur IE elle vient en 1er plan. Je pense qu'il faudrai mettre l'image dans une div dans ton fichier externe CSS pas sur la page HTML

Modifié 31 Août 2006 par PhY

luc45 · 31 Août 2006

en tous cas, ça ne vient pas des formulaires, je viens de prendre les codes et ils d'affichent correctement dans les 2 navigateurs... Je continue à chercher... Peut-être au niveau des div ?

Edit: ça vient de l'image, sur IE elle vient en 1er plan. Je pense qu'il faudrai mettre l'image dans une div dans ton fichier externe CSS pas sur la page HTML

De quels images parles tu et je ne vois pas trop comment la mettre dans le CSSn dis moi en plus

PhY · 31 Août 2006

dans ton formulaire du haut:

<img class="zonedesaisie" src="images_interface/espaceconnection.gif" alt="" border="0" height="126" width="149">

celui du mileu

<img class="blocDE" src="images_interface/blocdernierechange.gif" alt="" border="0" height="279" width="259">

Il faut créer une div avec l'image à l'interieur par formulaire je pense

exemple pour la 1ère:

.zonedesaisie {
background-image: url(images_interface/espaceconnection.gif);
}

Modifié 31 Août 2006 par PhY

luc45 · 31 Août 2006

ça ne marche pas mieux !!! snif

cela venait de mon ma classe inputmail la bordure était transparente je l'ai rempacer par :

.inputmail { color: white; font-size: 10px; line-height: 8; background-color: transparent; border: 0pt}

et ça marche mais le contenu des input ne s'affiche que l'orsque l'on clique dans la case c'est un peu dommage.

Si un modérateur veux bien supprimer l'adresse de la page qui se trouve au dessus je l'en remercierais.

Modifié 31 Août 2006 par luc45

PhY · 31 Août 2006

j'essaie encore de chercher mais je dois partir... j'essayerai de voir ton problème ce soir ou demain.

pour ton post, utilise la fonction "éditer" pour supprimer ton site

bye et bon courage !

luc45 · 31 Août 2006

Le problème est résolu, il suffisait de supprimer la hauteur de ligne.

PhY · 31 Août 2006

Super !!!

Bon courage et bonne continuation pour la suite !!!

PS: le design de ton site est extra

Connexion

Problème de CSS avec IE

Sujets conseillés

luc45

Imperatrice

Antoine Cailliau

luc45

Antoine Cailliau

Imperatrice

luc45

Imperatrice

luc45

PhY

luc45

PhY

luc45

PhY

luc45

PhY

Veuillez vous connecter pour commenter

Parcourir

Activité