Problème d'affichage internet explorer

Version imprimable

19/06/2006, 10h53
LuckyDj

Problème d'affichage internet explorer

Bonjour, j'ai une problème d'affichage uniquement sous internet explorer alors que mon site est valide w3. J'ai tout vérifié et je n'ai pas trouvé l'erreur c'est pour cela que je fais appel a vous!

voici l'adresse à laquelle la page est hebergée:
http://demierreluc.dyndns.org/test/

Vous pourrez voir que si vous l'ouvrez avec internet explorer, il y a un problème d'affichage avant le premier article...

Merci de votre aide!
19/06/2006, 10h56
Invité

C'est peut être pasque IE n'est pas aux normes (étonant ? NON!!).
19/06/2006, 10h58
LuckyDj

La tu m'apprends rien... mais n'empeche que la plupart des utilisateurs utilisent IE donc j'aimerai quand même résoudre mon problème... Meme si je n'utilise pas IE personellement
19/06/2006, 11h07
Invité

Tu peux afficher ton code ici s'il te plait ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="corps">
  <table class="article">
    <thead>
      <!-- Titre de l'article (en-tête) -->
      <tr>
        <th> <?php echo  $donnees['titre_art']; ?> </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <!-- Lien vers la page de commentaire  -->
        <th><a href='#' onClick="window.open('commentaire.php?id=<?php echo $donnees['id']-1;?>','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=0, copyhistory=0, menuBar=0, width=800, height=430');return(false)">Ajouter/voir un commentaire</a></th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <!-- contenu de l'article -->
        <td><img class="<?php echo  $donnees['classe']; ?>" src="<?php echo  $donnees['source']; ?>" alt="<?php echo  $donnees['description']; ?>" title="<?php echo  $donnees['titre_img']; ?>"/>
          <p class="black"><?php echo  $donnees['texte']; ?></p></td>
      </tr>
    </tbody>
  </table>
</div>

et le CSS correspondant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.corps {
   	margin-right: 25px;
   	margin-left: 200px;
   	margin-bottom: 10px;
   	padding: 5px;
   	color: #B3B3B3;
   	background-image: url(corps3.jpg);
   	border: 2px solid black;
   	border: inset;
   	margin-top: 10px;
 
}
 
.article {
   	margin-right: 25px;
   	margin-left: 25px;
   	margin-bottom: 10px;
   	padding: 5px;
   	color: #B3B3B3;
   	background-image: url(corps3.jpg);
   	border: 2px solid black;
   	border: inset;
   	margin-top: 10px;
}

19/06/2006, 11h15
Invité

C'est vraiment bizarre. Je peux pas t'aider désolé. Mais j'aimerais bien savoir ce qui cloche alors si qqun de plus expérimenté que moi pouvais regarder...

J'ai localisé le problème, par contre je n'ai pas encore réussi à le résoudre... en fait j'ai fixé la largeur de la table en % et IE n'a pas l'air d'aprécier, le problème c'est que si je ne fais pas comme ca, Ca sera moche suivant les résolutions

Voici le CSS pour table
Code:

1 2 3 4 5 6 7 8 9 10 11 table { margin-right: 50px; margin-left: 50px; margin-bottom: 10px; padding: 5px; color: #B3B3B3; background-color: #626262; border: 2px solid black; width: 95%; border: outset; }

19/06/2006, 12h58
Invité

J'ai eu un problème du style avec la page d'accueil de mon site. J'avais fixé les valeurs en % et le navigateur ne voulait rien savoir. J'ai remarqué qu'en enlevant le doctype le problème disparaissait.
19/06/2006, 13h20
LuckyDj

J'ai essayé ta variante mais ca ne change rien!
19/06/2006, 13h53
IdF-Socrateus
Citation:

Envoyé par LuckyDj

La tu m'apprends rien... mais n'empeche que la plupart des utilisateurs utilisent IE donc j'aimerai quand même résoudre mon problème... Meme si je n'utilise pas IE personellement

Aie confiance, FF vaincra !

sinon je comprend pas pourquoi ton style s'applique seulement sur une image et pas sur les thead, tr, th, td, etc ?!?
enfin, soit une classe s'applique à plusieurs éléments similaires -mais là y'en a qu'une à la fois-, soit à un seul, et dans ce cas :
si tu veux des styles pour une cellule précise, utilise plutôt des id
Code:

1 2 3 4 5 6 7 <tr id="image_tab" ...> <style> #image_tab { } </style>
mais à mon avis, trop mélanger les <table> et des padding de 50px en css, c'est pas le top... 8O
19/06/2006, 14h13
LuckyDj

Le problème c'est que je modifierai bien de premier article avec un id mais c'est tout généré en php donc c'est un peu plus dur...
19/06/2006, 14h26
<romain/>
Peut-être que ca viens des margin et padding qui ne sont pas initialise a 0.
Code:

1 2 3 4 5 *{ margin:0; padding:0; }
Ou sinon tu peux abondonner la mise en page avec des tableaux...
19/06/2006, 14h36
IdF-Socrateus

juste au passage, le doctype est en 1ère ligne, avant tout autre envoi...

Citation:

Ou sinon tu peux abondonner la mise en page avec des tableaux...

OUI !
pourquoi pas rester avec des divs, en plus t'en utilise déjà un paquet !

encore une fois, padding de 50px + table => pas bon ! (soit l'un, soit l'autre, mais là tu mélanges deux façons de mettre en page)
si tu trouves l'extension de firefox qui permet d'afficher la topologie de la page, ça devrait se voir tout de suite (je n'ai pas le lien ici, mais c'est dans les extensions pour "développeurs").

mais c'est avant tout une question de positionnement dans la page, non ?
le bloc est aligné juste en dessous de ton bloc de gauche, donc tu est en float:right; (position:float; par défaut); or ça ne rentre pas à cause du padding de 50px, donc ça le met à la ligne.
si ça ne marche pas avec ça, il te restera à changer tout le positionnement pour le passer en position:absolute;
19/06/2006, 18h28
Auteur

bonjour,

as tu définis un style particulier pour tes div bannières (1, 2, 3) et ton div menu (float, position,...) ?

un détail me gêne : tu définis le même fond pour ton div conteneur et ta table.

Je vois pas comment arriver à ce résultat seulement avec des div... Oui bien sur je n'ai pas cité tout mon CSS il y en a encore un bout!

CSS des bannières:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#banniere1
{
   float: left; /* La première partie sera à gauche*/
   width:724px; /* On définit la largeur de l'image */
   height: 200px; /* On définit la hauteur de l'image */
   background-image: url("images/ban1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   padding-left: 10px;
}
 
#banniere2
{
   width:100%; /* Se répétera sur toute la largeur de l'écran */
   height: 200px;
   background-image: url("images/ban2.jpg");
   background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
   margin-bottom: 10px;
}
 
#banniere3
{
   float: right; /* La dernière partie est à droite */
   width:55px;
   height: 200px;
   background-image: url("images/ban3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

20/06/2006, 10h02
IdF-Socrateus

ce que tu veux (tu me dis si je me plante mais bon...) :
- 1 bandeau en haut
- 1 bandeau en bas
- entre les deux, ta page avec :

- un bloc à gauche
- un bloc principal à droite
- contenant plusieurs blocs
- et un bloc pour switcher les pages en bas
ça donne donc :
- 1 div width:100% en haut
- 1 div pour la page width:100%, avec dedans :

- 1 div width:20% (par exemple, ou largeur fixe...)
- 1 div qui contiendra les autres blocs (je ne détaille pas plus, c'est le principe qui compte)...
- 1 div width:100% pour la bas de la page

des fois un bout de papier c'est pratique pour savoir où on va :lol:
20/06/2006, 15h27
Auteur

d'après la feuille de style de ses bannières, je crois qu'il voudrait les placer sur la même ligne (les hauteurs des bandeaux sont identiques), et c'est là que ça bloque (en partie).

banniere1-banniere2-banniere3
Je pense pour disposer les images correctement quelle que soit la résolution, il faut utiliser un tableau et les balises img.

A partir du moment où banniere1 et banniere2 sont "flottant", elles sortent du flux normal de la page. Ce n'est pas parce que tu définis un float left pour banniere 1 et float right pour banniere 3 que banniere 2 sera au milieu.
En ce qui me concerne j'ai une résolution 800x600, banniere 3 est à droite mais il cache une partie du 1er paragraphe.