Affichage de page incomplet sur Firefox

Question

wilfred

28 Jun 2009 à 09:32

Bonjour à tous,
J'ai un petit problème dont j'ignore la raison et que j'aimerais solutionner:
j'ai lancé une page de mon site ( www.rewisbique.eu/heral.html ) et elle apparaît entièrement sur ie mais incomplète sur Firefox. Pourriez-vous me dire ce qu'il y a d'erroné dans mon travail et comment faire pour y remédier? D'avance, mille mercis.
Wilfred (néophyte)
Je joint la css, si cela peut vous aider.

[Resolu]

/*css site rewisbique*/
html{
font-size: 100%;
}

body{
width: 860px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
background-image: url("irew/fond.jpg");
background-repeat: repeat;
font-family:  "Times New Roman", Arial, "Arial Back", sherif;
color: maroon;
}
p{
text-align: justify;
font-size: 14px;
font-weight: bold;
}
a{
text-decoration : #fcbb74;
color : #fcbb74;
}
a:hover{
color : none;
border-color: #fcbb74;
text-decoration: #fcbb74;
}
a:visited {
color : none;
border-color: #fcbb74;
text-decoration: #fcbb74;
}
#h1 {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 50px;
text-align: center;
font-variant: small-caps;
}
#h2 {
margin-top: 10px;
margin-bottom: 5px;
text-align: left;
font-variant: small-caps;
font-size: bolder 24px;
}
.com,.leg {
text-align: center;
font-size: 14px;
font-style: italic;
}
.cop {
text-align: center;
font-size: 14px;
}
.tit {
text-align: center;
font-size: 20px;
font-variant: none;
}
#en_tete{
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
margin-top: 20px;
}
#corps  /*justifié avec cadre*/{
width: 820px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding:20px;
border: #fa781a 3px ridge;
}
#note  /*centré sans cadre*/{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
font-variant: small-caps;
font-size: bolder 16px;
}
#note1 {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
font-variant: small-caps;
font-size: bolder 16px;
}
#cen
.centrage {
text-align: center;
width: 820px;
margin:auto;
padding-left: auto;
padding-right: auto;
padding-top: 20px;
padding-bottom: 20px;
border: #fa781a 3px ridge;
}

#wil /*cadre centré*/
.centrage {
text-align: center;
width: 830px;
margin:auto;
padding-left: auto;
padding-right: auto;
padding-top: 20px;
padding-bottom: 20px;
}

.texte { /*float left cadre & right sans cadre*/
float: left;
width: 400px;
margin-left: none;
margin-right: 10px;
margin-bottom: 20px;
padding: 20px;
border: #fa781a 3px ridge;
}
.image {
margin-left: 480px;
background-color: none;
margin-bottom: 20px;
border: none;

}
.mail {
float: left;
width: 450px;
border: #fa781a 3px ridge;
margin-left: none;
margin-right: 10px;
margin-bottom: 20px;
padding: 20px;
}
.form {
margin-left: 470px;
background-color: none;
margin-left: 10px;
margin-right: none;
margin-bottom: 20px;
border: none;
}

.form1 {
float: left;
width: 450px;
border: #fa781a 3px ridge;
margin-left: none;
margin-right: 10px;
margin-bottom: 20px;
margin-top: 30px;
padding: 20px;
}
.form2{
margin-left: 530px;
background-color: none;
margin-right: none;
margin-bottom: 20px;
border: none;
padding: 20px;
}
.form3 {
float: left;
width: 400px;
border: #fa781a 3px ridge;
margin-left: none;
margin-right: 10px;
margin-bottom: 20px;
padding-left: 120px;
padding-bottom: 20px;
padding-top: 20px;
}
#ecu {
width: 820px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding:20px;
}
td {
padding: 10px;
border: #fa781a 3px ridge;
}
#pied {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 20px;
border: #fa781a 3px ridge;
}

/*menu*/
#menu
background-image:url(irew/3.bout.png)
{background-color:none;
}

/* Position du menu, la position peux être en relative */
#menu {
margin-left:20px;
top: 50px;
bottom:50px;
}

/* On enlève les puces, le padding et le margin */
#menu ul {
padding: 0px;
margin: 0px;
list-style-type:none; /* Cette ligne enlève les puces */
}

/* Dimension des boutons, couleur de background, disposition initiale sur une ligne
NOTE: affecte la class "drop" */
li.drop {
display: block;
position:relative;
width: 102px; /* Largeur visible du bouton */
height: 22px;
overflow:hidden; /* Permet de cacher la partie débordante de l’image */
float:left;
border-right: 0; /* Cette ligne est pour l’esthétique, elle sépare les boutons d’une bordure */
}

/* L’effet hover affiche la hauteur automatiquement par rapport au nombre de LI
NOTE: affecte la class "drop" */
li.drop:hover {
height:auto;
}

/* Bordure qui sépare chaques boutons
NOTE: affecte le dernier niveau des boutons */
#menu ul li ul li {
border-top: 0; /* Cette ligne est pour l’esthétique, elle sépare les boutons d’une bordure */
}

/* Permet de corriger les espaces entre chaque LI dans EXPLORER
NOTE: affecte le dernier niveau des boutons */
*html #menu ul li ul li { float:left; }

/* On met nos liens du menu en block et donne un style au texte des boutons */
#menu a {
display:block;
width:100px; /* Largeur visible du bouton */
height: 20px;
overflow:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
color:#ffff66;
text-decoration:none;
}

/* effet hover des liens */
#menu a:hover {
color:maroon;
}

/* Permet d’insérer un background VIA le FIX PNG */
#menu span {
display: block;
position: relative;
width: 102px; /* 2x la largeur visible du bouton */
height: 17px; /* Soustrayez le "padding-top" de la hauteur initiale de votre bouton */
padding-left: 5px; /* Cette ligne permet de positionner le texte de votre bouton sur l’horizontal */
padding-top: 3px; /* Cette ligne permet de positionner le texte de votre bouton sur le vertical */
background-image:url(irew/3.bout.png);

background-repeat:no-repeat;
cursor:pointer;
/* background-image:url(menuBouton.png); CETTE LIGNE EST ÉCRITE DANS LE FICHIER "ALPHACSS.PHP" */
/* le background sera générer dynamiquement dépendant du navigateur */
}

/* On décale la tag SPAN de 100 px vers la gauche - pour ne pas perdre le texte dans la zone
hidden on lui met un padding-left de 105px */
#menu a:hover span {
left: -100px;
padding-left: 105px;
}



/*formulaire 1 CSS*/
input, textarea
{
   font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
}
 
input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
   background-color: #fcbb74;
}
 
label
{
   color: maroon; /* Colorer tous les labels (bah oui, pourquoi pas en bleu ?) */
}
 
legend /* On met un peu plus en valeur les titres des fieldset */
{
   font-family: Verdana, Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
   color: red;
   font-weight: bold;
}
 
fieldset
{
   margin: 20px;
   background: url("irew/fb.jpg");
   border: #fa781a 3px ridge;
}


/*gallery*/
#gallery {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
font-variant: small-caps;
font-size: bolder 16px;
border: #fa781a 3px ridge;
}
:root {
	overflow:scroll;
}
div#gallery {
}

div#thumbs {
	position: relative;
}
div#navigate {
	vertical-align: middle;
	margin: 0 auto;
}
div#navigate div#prev,
div#navigate div#up,
div#navigate div#next {
	display: inline;
	vertical-align: middle;
	margin: 0;
	padding: 20px;
}
div#navigate div#indexpage{
  	display: inline;
 	vertical-align: middle;
  	padding: 10px;
 	font-size: .8em; 
 	text-align: center;
 	color: #000000; 
}
div#gallery a:link, 
div#gallery a:visited{
}
div#gallery a:hover{
}
div#gallery a:active{
}
div#gallery img {
 	border-width: 0;
}
div#gallery h1{
 	font-weight: bold; 
 	font-size: 2em; 
}
div#gallery h2{
 	font-weight: bold; 
 	font-size: 1.4em; 
}
div#gallery table{
	margin: 0 auto;
	border: 0;
	border-collapse: collapse;
}
div#gallery td.thumb{
	vertical-align: middle;
 	text-align: center;
	border: 0;
	padding: 5px 10px;
	margin: 50px;
}
div#gallery img.thumb{
 	margin: 0;
 	padding: 0;
 	border: none;
}
div#gallery img.thumb:hover {
 	border-color: none;
}
div#gallery img.thumb:active{
}
div#gallery img.activethumb{
 	border: none;
}
div#gallery p.thumb{
	margin: 0;
 	padding: 0;
	font-size: .8em; 
}
div#gallery #pgblk{
}
div#pgimg{
	padding: 20px;
	vertical-align: middle;
}
div#pgimg img{
}
div#pglbl{
	margin:0;
 	padding: 1em 0 0 0;
}
div#homelnk{
}

[Resolu]
Modifié par wilfred (29 Jun 2009 - 18:12)

Tony Monast

Modérateur

29 Jun 2009 à 04:10

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Agylus

29 Jun 2009 à 07:45

Salut,

Je ne vois pas de problème d'affichage sur Firefox 3.

fvsch

29 Jun 2009 à 10:56

Bonjour wilfred,

J'ai modifié ton message ci-dessus, tu avais oublié d'ajouter la balise [ /code] à la fin de ton bloc de code.

Pour le problème soulevé, eh bien je ne l'ai pas croisé sous Firefox 3 ni sur Firefox 3.5.

wilfred

29 Jun 2009 à 12:10

Mille excuses pour l'oubli sur le code. Quant au problème rencontré, maintenant, il semble résolu.
Merci de votre aide,
Wilfred. Smiley smile

Tony Monast

Modérateur

29 Jun 2009 à 15:08

Bonjour Wilfred,

Tu considères que ce sujet est [Résolu] ? Smiley cligne

Merci!

Sujet clos

Sémantique web et HTML

Affichage de page incomplet sur Firefox