18073 sujets

Questions générales et questions de débutants

[Résolu] Problème d'affichage sous IE

Bonjour,

J'ai un petit problème avec mon site sous Internet explorer...

J'ai des parties du site qui ne s'affichent pas ! Du texte, la barre de navigation, etc... Certains éléments seulement pas tous. Sous Firefox je n'ai pas de problème...

Le plus "drôle" c'est que quand je quitte explorer (sans le fermer) en choisissant un autre programme dans ma barre de tâches windows par exemple ou que je réduit la fenêtre puis je l'agrandis ; l'affichage se fait alors tout à fait normalement Smiley eek . Ca le fait aussi si je sélectionne le texte....

Ma question est donc: "c'est quoi ce bordel" Smiley confus !!!

Mon site utilise php (quasiment tout mon contenu provient de ma DB) et css pour la mise en forme.

Merci de m'éclairer Smiley cligne
Modifié par bzayid (05 Aug 2005 - 14:01)
Modérateur
Salut,

Personne ne va pouvoir t'aider avec si peu de renseignements... Laisse donc un peu de code ou un lien... Smiley cligne
<modération>

Merci de respecter les règles du forum et de baliser les exemples de code

Par ailleurs, un code PHP pour résoudre un problème HTML client n'a aucune utilité : merci de donner l'url de la page, à défaut, de citer le code HTML résultant
</>
Modifié par Laurent Denis (05 Aug 2005 - 15:23)
Désolé, c'est vrai que c'est pas malin... Smiley confused

La page ne sera sur le web que lundi... en attendant voici le code source résultant. Merci.


<!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" xml:lang="fr" lang="fr">
<head>
<title>Mycoremed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

* {
margin: 0px;
padding: 0px;
}

body {
background-color: #FFFFFF;
position: relative; /* centrer le site */
margin-left: auto;
margin-right: auto;
width: 95%;
height: 100%; /* permet d'éviter le problème de la sélection de texte à l'aide de la souris dans IE (sic!) */
}

p {
margin: 0 0 15px 0;
}

.gras {
font-weight: bold;
}

.italique {
font-style: italic;
}

a img {
border: none;
}


/*-----------------------------------CONTENEURS PRINCIPAUX------------------------------------------------*/
#conteneur1 {
background-color: #FFFFFF;
position: absolute;
width: 90%;
margin: 20px 35px 35px 35px;
padding: 15px;
}

#conteneur2 {
background-color: #FFFFFF;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
margin: 0px;
padding: 20px;
}


/*-----------------------------------ENTETE DU SITE (LOGO+DESCRPTION)-------------------------------------*/
#header {
background-color: #FFFFFF;
padding: 10px 10px 10px 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #003366;
text-align: center;
}


/*-----------------------------------BARRE DE NAVIGATION (LEVEL 1)----------------------------------------*/
#nav {
text-align: center;
margin: 0px;
padding: 5px;
}

.nav_menu {
list-style-type: none;
background-color: #FFCC00;
border-top: 1px solid #CEAA18;
border-bottom: 1px solid #CEAA18;
border-left: 1px solid #CEAA18;
border-right: 1px solid #CEAA18;
margin: 0px;
padding: 3px;
}

.nav_menu li {
display: inline;
margin: 3px;
padding: 0px;
}

.nav_menu a {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #003366;
text-decoration: none;
}

.nav_menu a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #003366;
text-decoration: none;
}

.nav_menu a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #CC0000;
text-decoration: none;
}

.nav_menu a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #CC0000;
text-decoration: none;
}


/*----------------------------------CORPS DU SITE (COLONNE GAUCHE+CENTRE+DROITE)--------------------------*/

/*------------------------CONTENEUR DES COLONNES CENTRE+DROITE---------*/
#conteneur3 {
background-color: #FFFFFF;
margin: 0px;
padding: 10px 0px 0px 0px; /* mettre top et bottom à 0px pour que les blocs (nav-contener3-pied) se touchent */
}

/*------------------------COLONNE CENTRALE (CONTENU INFORMATIF)----------------*/
#centre {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #003366;
text-align: justify;
background-color: #FFFFFF;
border-left: 1px solid #E2E2E2;
border-right: 1px solid #E2E2E2; /* width colonne droite + padding-left + padding-right */
margin-left: 160px; /* width colonne gauche + padding-left + padding-right */
margin-right: 160px;
padding: 15px; /* padding-top(centre) = padding-top(gauche) */
}

.centre_titre {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #CC0000;
text-decoration: none;
padding-bottom: 10px;
}

.centre a {
text-decoration: underline;
}

.centre a:visited {
text-decoration: underline;
}

.centre a:hover {
color: #CC0000;
text-decoration: none;
}

.centre a:active {
color: #CC0000;
text-decoration: none;
}

/*------------------------IMAGE INCRUSTEE DANS LA COLONNE CENTRALE-------------*/
#centre_image {
float: left;
width: 150px;
padding: 5px 10px 10px 10px;
margin: 0px;
}

/*------------------------COLONNE DROITE(ICONES DE NAV + STATUT CHAT)----------*/
#droite {
float: right;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #003366;
text-align: center;
background-color: #FFFFFF;
width: 150px; /* 5px ou 10px plus petit que la colonne gauche lorsque droite inclue dans gauche */
margin: 0px;
padding: 15px 5px 0px 5px; /* padding-top = padding-top gauche/centre */
}

#droite a {
text-decoration: underline;
}

#droite a:visited {
text-decoration: underline;
}

#droite a:hover {
color: #CC0000;
text-decoration: none;
}

#droite a:active {
color: #CC0000;
text-decoration: none;
}

/*-------------------------------------PIED DE PAGE (COPYRIGHT)-------------------------------------------*/
#pied {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #003366;
text-align: center;
background-color: #FFFFFF;
margin: 0px;
padding: 20px;
clear: both;
}

#pied a {
text-decoration: ;
}

#pied a:visited {
text-decoration: ;
}

#pied a:hover {
text-decoration: ;
}

#pied a:active {
text-decoration: ;
}
</style>
</head>

<body>
<div id="conteneur1">
<div id="conteneur2">

<div id="header">

<img src="../images/logo_mycoremed.gif" alt="logo du site" />
<p>Description du site</p>
</div>

<div id="nav">
<ul class="nav_menu">
<li><a href='../web_l1/home.php?fichier=home.php'>Project overview</a></li><li><a href='../web_l1/news.php?fichier=news.php'>News</a></li><li><a href='../web_l1/project_details.php?fichier=project_details.php'>Project details</a></li><li><a href='../web_l1/participants.php?fichier=participants.php'>Participants</a></li><li><a href='../web_l1/publications.php?fichier=publications.php'>Publications</a></li><li><a href='../web_l1/workshops.php?fichier=workshops.php'>Workshops and meetings</a></li><li><a href='../web_l1/links.php?fichier=links.php'>Links</a></li><li><a href='../web_l1/private/private.php'>Private zone</a></li> </ul>

</div>

<div id="conteneur3">


<div id="droite">
<p><a href="../web_l1/home.php?fichier=home.php"><img src="../images/imgmihome.png" alt="Home" /></a>
<a href="../register.php"><img src="../images/imgmiinscrire.png" alt="Register" /></a>
<a href="../phpbb2/index.php"><img src="../images/imgmiirc.png" alt="Forum" /></a></p>
</div>

<div id="centre">
<div id="centre_image">
<img src="../images/" alt="" width="140px" />
</div>
<h2 class="centre_titre">Participants</h2>
<p></p>
</div>
</div>

<div id="pied">
<p>©Nom du site</p>
</div>

</div>

</div>

</body>
</html>

Modifié par bzayid (07 Aug 2005 - 16:27)
Enregistrer le code en fichier .htm

Ouvrez le fichier local avec IE et vous verrez ce que je veux dire Smiley cligne

Merci d'avance
Personne ne veut essayer d'enregistrer le code ci-dessus en fichier .htm pour essayer de m'aider à comprendre pourquoi le texte n'apparait pas sous IE Smiley decu
Voilà ce que ça devrait donner (firefox)

upload/59-firefox.gif

Et voilà ce que ça donne dans IE

upload/59-IE.gif

Et si on minimise et agrandit la fenêtre de IE (ou si on passe d'une fenêtre à une autre), ça s'affiche alors normalement

Smiley confus

<modération>
La fonction Joindre une image permet d'uploader une image en générant une vignette, ce qui est très apréciable pour les autres utilisateurs du forum.
</modération>
Modifié par Laurent Denis (06 Aug 2005 - 13:25)
je viens de faire des essais et il n'y a aucune logique...

Si j'enlève le pied de page (ou n'importante quel autre élément), ça s'affiche correctement !

Mon fichier est-il trop gros ? Le nombre d'éléments de ma CSS est-il trop important pour IE ? Pourtant comme je l'ai déjà dit, il suffit de minimiser la fenêtre et de la ré-ouvrir pour que l'affichage soit parfait... IE interprète donc bien ma CSS !

Personne n'a jamais connu de cas similaire ?
Modifié par bzayid (06 Aug 2005 - 14:28)
Remarquez que je place mon style dans le code html mais que le même phénomène se produit si j'utilise un link pour ma css

<link type="text/css" rel="stylesheet" href="style.css" />
Je me sens un peu seul.... Smiley decu

Personne ne réagit... Est-ce parce que vous ne comprenez pas le phénomène ou est-ce que mon problème n'intéresse personne?
J'ai enlevé infobulle qui générait des erreurs lors de la validation...

Avec ou sans les propriétés vides, la validation ne trouve aucune erreur.

Laurent Denis, as-tu essayé de sauver la page html en local pour te rendre compte du phénomène ? Ce serait gentil...
Modifié par bzayid (06 Aug 2005 - 15:40)
Ce qui serait gentil, ce serait :

- de fournir une CSS valide, je le répète. Je ne cherche pas où est le problème dans un code invalide, point. Parce que je veux pas perdre mon temps pour une éventuelle erreur de validité que tu es à même de trouver par toi-même (en revanche, si tu ne sais pas comment la résoudre, ta question sera la bienvenue).

- de fournir une CSS autant que possible allégée de tout ce qui n'a pas de rapport avec ton problème.

Pourquoi ? Par rigueur et par politesse. J'estime inadmissible qu'on ne prenne pas la peine de fournir un code débarassé des facteurs d'erreurs qu'on peut traiter soi-même et centré sur le problème éventuel.
Modifié par Laurent Denis (06 Aug 2005 - 15:46)
Excuse-moi, j'ai peut-être pas compris ce que tu me demandais...

J'ai fait valider ma CSS (avec et sans les propriétés vides) et le validateur n'a trouvé aucune erreur. C'est pas ce que tu m'as demandé de faire?

EDIT:

J'ai modifier le code ci-dessus. J'ai enlevé les propriétés vides.
J'ai également fait valider mon code html (aucune erreur)
Modifié par bzayid (06 Aug 2005 - 16:11)
Je viens d'essayer plusieurs modifications (comme enlever certains block, enlever du contenu), mais je n'arrive pas à comprendre où est le problème... J'ai l'impression que c'est le nombre de block imbriqué qui pose problème.

Personne n'aurait une idée ?
C'est un bug d'ie sur les flottants. La suppression de background-color: #FFFFFF; dans #conteneur2 devrait régler le problème, en attendant IE7 dont la beta 1 a déjà corrigé ce bug précis.

Dans ce type de cas, après avoir validé, il faut procéder par élimination progressive de tout le code HTML et CSS possible : tant que le bug se seproduit, on supprime par étape les morceaux de contenu, balisage et règles CSS sans intérêt.

Au final, ici, il ne reste que:

<style type="text/css">
#conteneur2 {
background-color: #FFFFFF;
}
#conteneur3 {
background-color: #FFFFFF;
}
#centre_image {
float: left;
width: 150px;
}
#pied {
clear: both;
}

</style>
</head>

<body>
<div id="conteneur2">
<div id="conteneur3">
<div id="centre_image">
<img src="../images/" alt="" width="140px" />
</div>
<h2>contenu</h2>
</div>

<div id="pied">
<p>pied</p>
</div>


Ce qui permet d'y voir plus clair, et de traquer plus facilement la propriétés en cause, ou la combinaison de propriétés susceptible de déclencher un bug d'IE Smiley cligne
Modifié par Laurent Denis (07 Aug 2005 - 19:07)
Merci à toi Smiley smile

J'aurais quand-même deux petites questions:

1) Cela veut dire que je ne peux pas utiliser la propiété background-color pour mes différents block ?

2) Sur le lien que tu m'a donné, je ne trouve pas quelle est l'erreur qui correspond à mon cas... peux-tu m'orienter ?

Merci encore.
Je viens d'essayer d'ajouter la propriété "position: absolute" au conteneur2 et... ça marche !

De la à savoir pourquoi ???
Modifié par bzayid (08 Aug 2005 - 09:30)
Bon, je pense que je peux mettre [résolu] à mon post...

Merci à Laurent Denis pour sa patience et ses conseils, et à tous ceux qui font d'Alsacréations ce qui l'est.

Ma page a été créée en suivant les tutos et les conseils du site. Je me suis astreint à développer un site accessible et qui respecte les normes. Je pense que je suis dans la bonne voie... Merci à tous. Smiley smile

Note: Même si je clôture ce post, si quelqu'un pouvait m'expliquer pourquoi IE a généré cette bizzarerie (le bug n'intervient qu'au chargement de la page, et disparait lorsque l'on quitte la fenêtre et qu'on y revient), je serais ravi d'approfondir un peu plus mes modestes connaissances Smiley cligne
Sujet clos
Aller à