Bonjour,
j'étais venu il y a quelques temps pour un problème de footer, et j'avais testé mon site www.archigraff.com sous différents navigateurs. Apparement tout marchait bien.
Cependant j'ai remarqué que sous firefox, au premier chargement de la page j'ai le footer qui vient se mettre au milieu du div contenu (cf image).
Si on recharge la page tout se passe bien, de plus j'ai remarqué que ce bug intervient plus facilement quand il ya beaucoup de contenu XHTML comme dans la rubrique "portfolio" par exemple.
Quelqu'un aurait-il une piste à m'indiquer? Je ne vois pas d'où ça peut venir.
De plus, si vous voyez le moindre bug sur vos navigateurs pouvez vous me le signaler?
merci
PS: voici ma feuille de style:
j'étais venu il y a quelques temps pour un problème de footer, et j'avais testé mon site www.archigraff.com sous différents navigateurs. Apparement tout marchait bien.
Cependant j'ai remarqué que sous firefox, au premier chargement de la page j'ai le footer qui vient se mettre au milieu du div contenu (cf image).
Si on recharge la page tout se passe bien, de plus j'ai remarqué que ce bug intervient plus facilement quand il ya beaucoup de contenu XHTML comme dans la rubrique "portfolio" par exemple.
Quelqu'un aurait-il une piste à m'indiquer? Je ne vois pas d'où ça peut venir.
De plus, si vous voyez le moindre bug sur vos navigateurs pouvez vous me le signaler?
merci
PS: voici ma feuille de style:
/*------------------------------------------*/
/* __ _ _ _ __| |_ (_)__ _ _ _ __ _ / _|/ _|*/
/*/ _` | '_/ _| ' \| / _` | '_/ _` | _| _|*/
/*\__,_|_| \__|_||_|_\__, |_| \__,_|_| |_| */
/* |___/ */
/*------------------------------------------*/
/*-----------------------STYLE DE BASE ET INITIALISATION DES MARGES-----------------------*/
body {
background-color: #52635e;
background: url(rougegorge/rougegorgefond.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
color: #444444;
}
* {margin:0; padding:0;}
/*-----------------------MISE EN PAGE GRAPHIQUE-----------------------*/
.clearfloats {clear: both; height:0px; overflow:hidden;}
/*contenantglobal*/
#rgorgeglobal {
width: 746px;
margin-left: auto;
margin-right: auto;
}
/*header*/
#rgorgeheader {
width: 746px; height: 85px;
background: url(rougegorge/rougegorge01.jpg) no-repeat;
}
/*titre*/
#rgorgetitregauche {
width: 223px; height: 63px;
background: url(rougegorge/rougegorge02.jpg) no-repeat;
float: left;
}
#rgorgetitredroit {
width: 523px; height: 63px;
background: url(rougegorge/rougegorge03.jpg) no-repeat;
float: left;
}
/*contenu*/
#rgorgecontenufond {
width: 746px;
float: left;
clear: both;
background: url(rougegorge/rougegorge04.jpg);
}
/*contenugauche: contournement IE*/
#rgorgecontenugauche {
width: 136px;
margin: -40px 0px auto 40px;
float: left;
position: relative;
overflow: hidden;
}
/*contenugauche: pour les autres navigateurs*/
*>#rgorgecontenugauche {
margin-left: 80px;
}
/*contenudroit: contournement IE*/
#rgorgecontenudroit {
width: 400px;
margin: -40px 40px auto 0px;
float: right;
position: relative;
overflow: hidden;
}
/*contenudroit: pour les autres navigateurs*/
*>#rgorgecontenudroit {
margin-right: 80px;
}
/*footer*/
#rgorgefootergauche {
width: 248px; height: 52px;
float: left;
clear: left;
background: url(rougegorge/rougegorge05.jpg);
}
#rgorgefooterdroite {
width: 498px; height: 52px;
float: right;
background: url(rougegorge/rougegorge06.jpg);
}
#ecritfooter {
background: none;
font-size: 0.8em;
color: #d8892c;
margin-top: 38px;
clear: right;
float:left;
}
/*-----------------------MENU-----------------------*/
#listmenu {
float: right;
padding-top: 1px;
padding-right: 74px;
color: #999999;
}
#listmenu li {
float: right;
list-style-type: none;
}
#listmenu a {
color: #555555;
font-weight: normal;
text-decoration: none;
background: url(rougegorge/menu.gif) repeat-x;
padding: 0 10px;
}
#listmenu a:hover {
color: #cbdcd7;
background: url(rougegorge/menuhover.gif) repeat-x;
}
/*-----------------------CONTENU GAUCHE-----------------------*/
#rgorgecontenugauche h4 {
clear: left;
background: none;
}
#rgorgecontenugauche img {
margin-bottom: 4px;
}
/*-----------------------logo présentation-----------------------*/
#logopresentete {
background: url(rougegorge/logoprestete.gif) no-repeat;
padding-top: 99px;
float: left;
}
#logopresenfond {
background: url(rougegorge/logopresfond.gif);
padding: 0 5px;
font-size: 0.8em;
color: #999999;
}
/*logopresentation: contournement IE*/
#logopresenfin {
background: url(rougegorge/logopresfin.gif) no-repeat;
padding-bottom: 70px;
border-bottom: solid #ebfef8 1px;
}
/*logopresentation: autres navigateurs*/
*>#logopresenfin {
border-bottom: none;
}
/*-----------------------formulaire-----------------------*/
.formulaire h4 {
margin: 0;
padding: 0;
}
.formulaire form input{
font-size: 1em;
}
.formulaire a {
font-size: 0.9em;
font-weight: normal;
border: solid 1px #999999;
color: #d8892c;
background-color: #fff5eb;
}
.champs {
border: solid 1px #d8892c;
color: #52635e;
background-color: #CCCCCC;
}
/*-----------------------admin-----------------------*/
.admin {
border: solid 1px #CCCCCC;
color: #CCCCCC;
background-color: #52635e;
margin-top: 10px;
float: left;
max-length: 20px;
}
/*-----------------------Liens-----------------------*/
#liens {
margin-bottom: 10px;
}
/*-----------------------TEXTE, POLICES, PARAGRAPHES-----------------------*/
/*titres*/
h1 {
font-size: 1.8em;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 0.2em;
padding: 0 0 6px 10px;
color: #666666;
}
h2 {
font-size: 1.4em;
font-weight: normal;
color: #57776c;
}
h3 {
padding-left: 10px;
letter-spacing: 0.2em;
font-weight: bolder;
font-size: 1.2em;
color: #3f7c67;
}
h4 {
font-weight: normal;
padding-bottom: 4px;
font-weight: bolder;
font-size: 1.2em;
color: #999999;
}
h5,h6 {
padding-left: 10px;
font-size: 1em;
}
/*paragraphes*/
p {
text-align: justify;
padding: 0 14px 6px 10px;
}
#rgorgecontenugauche p {
padding: 0;
}
/*span et mise en valeur du texte*/
em {
font-style: normal;
font-weight: normal;
color: #4e997f;
}
strong {
font-weight: normal;
color: #d8892c;
}
span {
font-variant: small-caps;
}
cite {
color: #4e997f;
}
acronym {
color: #888888;
}
code {
font-size: 1em;
background: #E9E9E9;
text-align: left;
color: #4e997f;
}
*>code {
font-size: 1.2em;
}
/*liens*/
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #d8892c;
}
a:visited {
color: #70998b;
}
a:hover {
color: #999999;
}
/*-----------------------IMAGES, SEPARATEURS-----------------------*/
img {
margin: 4px;
max-width: 220px;
float: left;
border: none;
}
/*-----------------------TABLEAUX-----------------------*/
table {
margin-left: auto;
margin-right: auto;
text-align: center;
}
td {}
tr {}
/*-----------------------CATEGORIE-----------------------*/
.categorie {
background: url(rougegorge/titreH2.gif) no-repeat;
padding-bottom: 10px;
clear: left;
}
.categorietitre {
float: left;
padding: 8px 0 12px 58px;
}
.categoriedate {
float: right;
font-size: 0.8em;
padding: 12px 16px 0 0;
color: #888888;
}
.categoriecontenu {
clear: both;
}
.categorie ul {
list-style-image: url(rougegorge/puce.gif);
color: #3f7c67;
font-size: 1em;
padding: 0 14px 10px 50px;
clear: left;
text-align: justify;
}
.categorie ol {
color: #3f7c67;
font-size: 1em;
padding: 0 14px 10px 50px;
clear: left;
text-align: justify;
}
.categorie h4 {
padding-left: 24px;
}
