Aller au contenu

Problème de CSS avec IE


luc45

Sujets conseillés

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

<form ...>

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

<input type="text">

</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é par luc45
Lien vers le commentaire
Partager sur d’autres sites

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é par Antoine Cailliau
Lien vers le commentaire
Partager sur d’autres sites

<!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.

Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par PhY
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par PhY
Lien vers le commentaire
Partager sur d’autres sites

ç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é par luc45
Lien vers le commentaire
Partager sur d’autres sites

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 !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...