Problème d'affichage avec Firefox

sathiya Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention - 15 nov. 2007 à 21:06

Bonjour,
En hebergant mon site , j'ai pu voir apparaitre une erreur d'affichage!
Probleme qui à ma grande surprise et aparut sur mozilla ( et non sur IE)
En faite Firefox n'a pas compri le style min-height.
Je vous laisse voir de vos propres yeux.

De plus firefox me cree un espace entre la banière et le menu alors que j'ai demandé un padding 0;

La page web : http://gwek.free.fr/essai/petitelune.php

Voisci le code html

<div id="basse">
<div id="en_tete"></div>

<div id="menu">
  <div id="Navigation">
       <h3></h3>
       <ul class="rien">
           <li><a href="petitelune.php?page=index">Accueil</a></li>
           <li><a href="http://www.petite-lune-forum.sup.fr/">Forum</a></li>
           <li><a href="petitelune.php?page=projetsN">Nos Projets</a></li>
		   <li><a href="petitelune.php?page=téléchargement">Téléchargement</a></li>
		   <li><a href="petitelune.php?page=galerie">Galerie</a></li>
		   <li><a href="petitelune.php?page=staff">Staff</a></li>
		   <li><a href="petitelune.php?page=partenaire">Partenaires</a></li>
		   
       </ul>
   </div>
   <div>
       <p align="center">
      <a title="RSS Feed" href="http://gwek.free.fr/cutenews/rss.php?number=10">
<img src="http://gwek.free.fr/cutenews/skins/images/rss_icon.gif" border=0  />
</a>
   </p>
   </div>

</div>

<div id="corps">
   <h1></h1>
   <p align="center">Contacter Rajouls</p>
   <div align="center" class="news">
   <h2>{title}</h2>
   <div class="avatar">{avatar}<br />[com-link]{comments-num} Commentaires[/com-link]<br /><br />Publié par {author-name}<br />le{date}</div>
   <div class="texte">{short-story}</div>
</div>

</div>

<div id="pied_de_page"></div>
</div>

voici le code css:

#corps p,h2
{
	padding-left:5px;
}
#corps h2
{
   height: 40px;
   margin:10px;
   background-image:url(images/FMP-arbalest-done-planetren.png);
   background-repeat: no-repeat;
   background-position:15px;
   padding-left: 40px;
   color: #4C6E31;
   text-align:left;
   border: 1px solid;
   vertical-align:middle;
}
h4
{
   margin:10px;
   color: #4C6E31;
   text-align:center;
   border-bottom: 1px solid;
   border-bottom-color:#1A2A1A;
   vertical-align:middle;
}
.news
{
	border: 1px solid;
	border-color:1A2A1A;
	margin:10px;
	min-height:70px;
	margin-bottom:20px;
	
}
.avatar
{
	float: left;
	width:130px;
	border: 1px solid;
	border-color:4C6E31;
	text-align:center;
	margin:10px;
	margin-bottom: 5px;
}

.texte
{
	margin-left:130px;
	border:1px;
	border-color:4C6E31;
}

/* Pied de page*/
#pied_de_page
{
   background-image:url(images/petitelune_09.jpg);
   background-repeat:no-repeat;
   height:33px;
}

Merci d'avance pour votre aide!

Afficher la suite

A voir également:

Problème d'affichage avec Firefox
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Telecharger firefox - Télécharger - Navigateurs
Affichage double ecran - Guide
Problème affichage fenêtre windows 10 - Guide
Exporter favoris firefox - Guide

5 réponses

Réponse 1 / 5

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

pour le décalage c'est une question de marge. par défaut les headers en ont. pour la valeur zéro, pas d'unité.

#corps h1
{
	background-image:url(images/petitelune_04.gif);
	background-repeat:no-repeat;
	height:106px;
	margin:0;
}
#Navigation h3
{
	background-image:url(images/petitelune_03.jpg);
	background-repeat:no-repeat;
	width:120px;
	height:106px;
	margin:0;
}

Réponse 2 / 5

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

re,

pour le reste ce n'est pas une question de {min-height:70px}, d'ailleurs les <div> concernés sont tous plus hauts que ça.
tu appliques {float:left} aux <div class="avatar"> ce qui fait qu'ils ne sont plus contenus par <div class="news">. pour corriger cela il faut appliquer {float:left} au conteneur mais tu verras que cela a des conséquences.

par ailleurs, je me permets de te faire remarquer que ton code html n'est pas joli du tout. il contient des erreurs, comme du texte qui n'est pas contenu dans une balise ou à l'inverse une balise vide… pour la mise en page cela peut engendrer des erreurs et encore plus d'un navigateur à l'autre.
déjà qu'il ne font pas tous la même chose avec le code valide, cela augmentera forcement avec du code "exotique" !
;o)

par exemple pour tes news le code suivant est correct et suffit amplement. le reste tu peux le faire avec css, ce sera beaucoup plus stable et efficace. tu devrais aussi renseigner l'attribut 'alt' des <img> cela peut être utile en cas de lien mort et les attributs 'height' et 'width' comme cela l'espace est réservé avant même l'affichage.

<div>
   <div class="news">
	<h2>Claymore </h2>
	<div class="avatar">
		<img alt="" src="http://gwek.free.fr/cutenews/data/upimages/newsouf-de-manga.gif" />
		<a href="/essai/petitelune.php?subaction=showcomments&id=1178904326&archive=&start_from=&ucat=&">4 Commentaires</a>
		<p>Publié par oufdemangas</p>
		<p>le11 May 2007</p>
	</div>
	<div class="texte">
		<p>Voici Claymore 6!!</p>
		<p>Si attendu il est enfin disponible sur mononoké via <a href="http://mononoke-bt.org/gettorrent.php?id=8886">ce lien </a></p>
		<p>Bon anime à tous!!!</p>
		<img alt="wink" src="http://gwek.free.fr/cutenews/data/emoticons/wink.gif" />
	</div>
</div>

enfin tu devrais organiser ton code, le "ranger" avec des indentations, cela te permettrait de mieux voir et/ou comprendre tes erreurs.

voili, voila…
en tout cas je trouve ton site très joli, bon courage pour la suite !

Réponse 3 / 5

sathiya Messages postés 6 Date d'inscription Statut Membre Dernière intervention

merci pour ton aide dalida, en effet ça marche super bien. Je commence à commendre le Css et je trouve ça plutôt cool!

Ensuite pour le Css, si je ne met pas texte entre certaine balise c'est pour pouvoir créer plusieur css ( donc plusieur style pour le site)! Donc laisse des balise vid eme permet de faire de design bien poussé et differant.

Pour ce qui est du site , il a été fais sur photoshop mais je le trouve un vert , donc il y aura surment un autre design d'ici peu!! Voila je te lais à plus.

Réponse 4 / 5

sathiya Messages postés 6 Date d'inscription Statut Membre Dernière intervention

En effet , il y a des consequence, celle-ci sont apparu recement: le conteneur news n'est plus reconnu par la corps ce qui donne ça:
comment puis-je ressoudre ce probleme.

PS: j'ai deja essaye de mettre un float au corps mais cela ne marche pas.
le css

body
{
   width: 900px;
   margin: auto; 
   background-color:#000000;
}
#basse
{
	width:900px;
	background-image:url(images/petitelune_08.jpg);
}
/* En tête */
#en_tete
{
   width: 900px;
   height: 318px;
   background-image:url(images/petitelune_01.jpg);
   background-repeat: no-repeat;
   margin:0px;
}
/* Menu */
#menu
{
	float: left;
	width: 120px;
	margin:0px;
	margin-left:136px;
	padding:0px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:15px;
}
.rien
{
   list-style-type: none;
}
#Navigation h3
{
	background-image:url(images/petitelune_03.jpg);
	background-repeat:no-repeat;
	width:120px;
	height:106px;
	margin:0px;
}
#Navigation h3:hover
{
	background-image:url(images/petitelune_3.jpg);
	background-repeat:no-repeat;
	width:120px;
	height:106px;
}
#Navigation ul 
{
   padding: 0px;
   padding-left: 10px; 
   margin: 0px;
   margin-bottom: 5px; 
}
a 
{
color:#4C6E31;
}
a:hover
{
   color: #1A2A1A;
}
/* Corps*/
#corps
{
   margin:0px;
   margin-left: 256px; 
   margin-right:137px;
   padding: 0px; 
   width:507px;
   color: #B3B3B3;
   padding-right:10px;
}   
#corps h1
{
	background-image:url(images/petitelune_04.gif);
	background-repeat:no-repeat;
	height:106px;
	margin:0px;
}
#corps p,h2
{
	padding-left:5px;
}
#corps h2
{
   height: 40px;
   margin:10px;
   background-image:url(images/FMP-arbalest-done-planetren.png);
   background-repeat: no-repeat;
   background-position:15px;
   padding-left: 40px;
   color: #4C6E31;
   text-align:left;
   border: 1px solid;
   vertical-align:middle;
}
h4
{
   margin:10px;
   color: #4C6E31;
   text-align:center;
   border-bottom: 1px solid;
   border-bottom-color:#1A2A1A;
   vertical-align:middle;
}
.news
{
	border: 1px solid;
	border-color:1A2A1A;
	margin:10px;
	min-height:70px;
	margin-bottom:20px;
	float: left;
	width:490px;
}
.avatar
{
	float: left;
	width:125px;
	border: 1px solid;
	border-color:4C6E31;
	text-align:center;
	margin:10px;
	margin-bottom:5px;

}

.texte
{
	margin-left:125px;
	border:1px;
	border-color:4C6E31;
	padding-right:10px;
}
.texte1
{
	border:1px;
	border-color:4C6E31;
	padding-right:10px;
}
/* Pied de page*/
#pied_de_page
{
   background-image:url(images/petitelune_09.jpg);
   background-repeat:no-repeat;
   height:33px;
}

ça donne ça: http://plclaymore.free.fr/site%20du%20site/petitelune.php?page=staff

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Fanny4444

Bonjour,

J'ai le meme probleme ... on m'a dit que mon site n'est pas joli en firefox ... alors que sous internet explorer tout a l'air de marche ...

c tout basic vu que je debute, alors is vous pourriez m'aider ca serait cool !!!!

voici on code menu.php

<html>
<body bgcolor="#FFFFFF" text="#006699" link="#000066" vlink="#FFFFFF" alink="#000066">
<center>
<img src="IMAGES/logo.jpg" alt="codrive">
<BR>
<B><font color="#006699";><font size=6>COvoiturage de Demain : Ré-Inventons la Voiture Ensemble</font></font></font></B>
</center>
<font size=4>
<div style="position=absolute; top:250px; left:0px; width=70px; background-color=#006699; font color=#FFFFFF"></div>
<div style="position=absolute; top:250px; left:70px; width=200px; background-color=#006699;">
<a href="index.php"> ACCUEIL</a></div>
<div style="position=absolute; top:250px; left:270px; width=300px; background-color=#006699;">
<a href="recherche.php">VOIR LES ANNONCES</a></div>
<div style="position=absolute; top:250px; left:570px; width=300px; background-color=#006699;">
<a href="deposerannonces.php">DEPOSER UNE ANNONCE</a></div>
<div style="position=absolute; top:250px; left:870px; width=190px; background-color=#006699;">
<a href="partenaires.php">PARTENAIRES</a></div>
<div style="position=absolute; top:250px; right:0px; width=200px; background-color=#006699;">
<a href="nouscontacter.php">NOUS CONTACTER</a></div>
</font>
<BR><BR><BR><BR><BR>
</html>

Merci pour votre aide !!

Fanny
Fanny_14_12@hotmail.com

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

crée un fil de discussion propre à ton problème, stp.
et si tu viens sur un forum, ne t'attends à des réponses sur MSN, le but du jeu c'est que tout le monde en profite.
-;o)

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''

impossible de voir les photos et videos sur une conversation messenger

Probleme d'affichage google chrome

Problème d'affichage d'une page web.

Votre réponse

Discussions similaires