Affichage page d'accueil différent selon mozilla ou explorer

[kinesooyoung]

Bonjour, Bonsoir,

(J'ai fais une recherche sur le forum d'entraide mais visiblement, personne n'a déjà rencontré le même problème. De plus, je poste dans le forum "problème avec un code, script" même si je ne suis pas bien sûre que le problème vienne de là.)

Mon problème est le suivant :

Mozilla >


Internet Explorer >


Comme vous pouvez le constater, il y a un problème d'affichage de la page d'accueil sous Explorer. j'ai essayé de modifié les paddings mais en vain. Voici mon CSS pour plus de clarté (le template aussi a été modifié mais je ne pense pas que cela vienne de là) :

Code:

/*|__________ DEBUT PAGE ACCUEIL __________*/

.en_tete{
  width:800px;
  height:400px;
  background-image:url('http://i44.servimg.com/u/f44/11/24/66/10/page_d11.jpg');
  background-repeat:no-repeat;
  margin-left:-4px;
  margin-right:-4px;
  margin-top:-3px;
  margin-bottom:-3px;
}

/*|mise en page des colones|*/

#navigation{
  width:800px;
  height:28px; 
  padding-left:10px;
}

#welcome{
  width:281px;
  height:243px;
  padding-left:60px;
  padding-top:3px;
}

#contexte{
  width:259px;
  height:243px;
  padding-right:25px;
}

#partenaires{
  width:260px;
  height:230px;
  padding-left:15px;
  padding-bottom:25px;
}

#news{
  width:564px;
  height:129px;
  padding-left:100px;
  padding-bottom:150px;
  padding-right:100px;
  padding-top:-100px;
}

#staff{
  width:236px;
  height:142px;
  padding-bottom:100px;
  padding-top:-50px;
  padding-right:20px;
  padding-left:20px;
}

/*|mise en page des textes|*/

#infos_accueil{
  color:#FFE1F0;
  text-shadow: 0px 0px 0px #FFE1F0;
}

#histoire_accueil{
  color:#E23D7F;
  text-shadow:0px 0px 0px #E23D7F;
  text-align:justify;
}

#news_accueil{
  color:#E23D7F;
  text-shadow:#E23D7F;
}

#lien_nav{
  font-size:15px;
  color:#E23D7F;
  text-shadow:0px 0px 0px #E23D7F;
  padding-left:60px;
}

#lien_design{
  color:#FFE1F0;
  text-shadow: 0px 0px 0px #FFE1F0;
}

#lien_optimise{
  color:#FFE1F0;
  text-shadow: 0px 0px 0px #FFE1F0;
}

#devenir_part{
  text-shadow:0px 0px 0px #E23D7F;
  text-align:center;
  padding-right:15px;
}

/*|__________ FIN PAGE ACCUEIL __________*/

Merci d'avance de votre réponse .

[Lixyr]

Bonsoir.

Le code css ne suffit pas, il nous faudrait aussi le code de la PA, si c'est dans la pa. Le code html en clair.

Cordialement.

[kinesooyoung]

Bonjour et merci de l'attention portée à mon problème

Voici le HTML de ma PA :

Code:

<div class="en_tete">

<table>
<tr>
<td id="navigation"><p id="nav_accueil"><a href="http://roseburg.lebonforum.com/t1-le-reglement" id="lien_nav">Règlement</a>    <a href="http://roseburg.lebonforum.com/t2-le-contexte" id="lien_nav">Contexte</a>    <a href="http://roseburg.lebonforum.com/f4-postes-vacants" id="lien_nav">Postes Vacants</a>    <a href="http://roseburg.lebonforum.com/t3-questionsreponses" id="lien_nav">Questions/Réponses</a>    <a href="http://roseburg.lebonforum.com/t6-le-bottin-des-avatars" id="lien_nav">Bottin</a></p></td>
</tr>
</table>


<table>
<tr>
<td id="welcome"><p id="infos_accueil">Ouverture du forum le oo/oo/2o12</p>
<p id="infos_accueil">Design par <a href="http://kineandsweetpeople.e-monsite.com/" id="lien_design">KINE</a></p>
<p id="infos_accueil">Optimisé pour <a href="http://www.mozilla.com/fr/firefox/" id="lien_optimise">Mozilla</a></p></td>

<td id="contexte"><p id="histoire_accueil">La ville de Roseburg dans l’état de L’Oregon, située à l’Ouest des Etats-Unis est comme qui dirait, à part. Assez repliée, sans être austère, ses habitants ont, pour la plupart, choisi de vivre ici pour son calme, sa beauté et afin d’obtenir une certaine intimité. En apparence si tranquille elle ne soulève pas l’attention des villes voisines et pourtant… Et si cette banalité faisait en fait de Roseburg une ville hors norme, où le mystère se mêle au secret ?</p></td>

<td id="partenaires"><p id="devenir_part"><a href="http://roseburg.lebonforum.com/t10-les-demandes-de-partenariats">En devenir un ?</a></p>
<p id="logo_accueil"><a href="http://kineandsweetpeople.e-monsite.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/sans_195.png" alt="Kine & SweetPeople"></a> <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_110.png" alt="nom forum"></a>
<a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_110.png" alt="nom forum"></a> <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_110.png" alt="nom forum"></a>
<a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_110.png" alt="nom forum"></a> <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_110.png" alt="nom forum"></a></p></td>
</tr>
</table>


<table>
<tr>
<td id="news"><p id="news_accueil">Ouverture du forum</p></td>

<td id="staff"><p id="logo_staff"><a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a> <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a>  <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a><br/>
 <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a>  <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a>  <a href="http://roseburg.lebonforum.com/"><img src="http://i44.servimg.com/u/f44/11/24/66/10/logo_s10.png" alt="nom staff"></a></p></td>
</tr>
</table>

</div>

Merci.

[kinesooyoung]

Rebonjour,
J'ai aussi constaté que sous Chrome il y avait le même problème. Visiblement il n'y a que sous Mozilla que l'affichage se présente comme je le souhaite :/

[PatMax]

A mon avis, il y a des contradictions dans ton CSS.
Exemple:

Code:

#staff{
  width:236px;
  height:142px;
  padding-bottom:100px;
  padding-top:-50px;
  padding-right:20px;
  padding-left:20px;

padding_top:-50px; provoque une alerte dans mon outil de développement.
A vérifier de ce côté là.

[kinesooyoung]

Merci de ta réponse ^^

J'ai retiré mes padding à valeur négative et le problème reste le même (enfaite rien n'a bougé).

Code:

#news{
  width:564px;
  height:129px;
  padding-left:100px;
  padding-bottom:150px;
  padding-right:100px;
}

#staff{
  width:236px;
  height:142px;
  padding-bottom:100px;
  padding-right:20px;
  padding-left:20px;
}

[PatMax]

Tente de supprimer le padding-bottom ou du moins modifier sa valeur.

[kinesooyoung]

J'ai essayé de nombreuses valeurs déjà ... Et si je supprime le padding-bottom, alors là même sous Mozilla la partie "staff" sera trop basse :/

EDIT : Juste pour infromer de quelques petits modifications au niveau des tailles des <table>. Mais le problème demeure...

Code:

#navigation{
  width:800px;
  height:28px; 
  padding-left:10px;
}

#welcome{
  width:281px;
  height:243px;
  padding-left:60px;
  padding-top:3px;
}

#contexte{
  width:259px;
  height:243px;
  padding-right:25px;
}

#partenaires{
  width:260px;
  height:230px;
  padding-left:15px;
  padding-bottom:25px;
}

#news{
  width:540px;
  height:129px;
  padding-left:100px;
  padding-bottom:110px;
  padding-right:100px;
}

#staff{
  width:260px;
  height:142px;
  padding-bottom:120px;
  padding-left:20px;
}

[PatMax]

Je viens de fouillé ton forum et j'ai peut-être trouvé la solution.
Il faut que tes hauteurs de news et staff soit les mêmes.
Personnellement en mettant 42px, j'obtiens quelques chose de plus cadré.

A toi de regarder quelle valeur te conviendra la plus.
Attention également à ce que l'addition de toutes les hauteurs ne soit pas supérieure à la hauteur de l'entête

[kinesooyoung]

Superbe ! Merci beaucoup !

En fait, je pensais qu'il fallait qu'au final toutes les valeurs fassent 800 par 400 (que tous les petits tableau soient égaux au grand tableau d'ensemble en gros) mais visiblement non donc ... ^^

En tout cas merci !

EDIT : bon à présent ça ne sort plus de la page d'accueil, mais il y a toujours un problème avec un décalage sous Internet Explorer ... c'est embêtant m'enfin c'est déjà moins grave

[PatMax]

Alors pour ton problème tu as deux cellules sur la même ligne, (news et staff) et tu ne leur donnais pas la même hauteur ce qui n'était pas lu correctement par tous les navigateurs.