CSS + Javascript qui foire sur Firefox 3.6.13 [Résolu]

Signaler
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
-
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
-
Hello,

je ne sais pas vraiment si je poste dans le forum approprié mais quoi qu'il en soit je vous expose mon soucis :
J'ai un problème sur le footer de la dernière mouture de mon site web ; pour résumer la situation mon footer comporte quelques liens et surtout une image pour le bandeau (bandeau qui prend toute la largeur de la page). Jusque là rien d'extraordinaire. J'ai "réglé" mon footer avec un petit javascript pour que lorsque ma page est moins haute que l'écran mon footer soit en bas de page, et lorsque ma page est plus haute que l'écran mon footer reste en bas de page et apparaisse logiquement quand on scrolle vers le bas -> un footer en position "static" quoi, mais qui se règle par rapport à la hauteur de ma page.
Rien d'exceptionnel me direz-vous, néanmoins je constate un disfonctionnement sur Firefox 3.6.13 -> sur cette version du navigateur mon bandeau n'apparaît pas. Alors que comble de stupeur mon bandeau apparaît pourtant bien, et ce correctement, sur la version Firefox 4 beta. J'ai bien évidemment testé sur d'autres navigateurs : Safari 5.0.3, Chrome 9.0.597.07, Opera 11, Internet explorer 8 et 9... Et sur chacun de ces navigateurs mon footer s'affiche comme il le doit.
Pour ainsi dire je ne comprend pas d'où vient le problème... J'ai essayé de reprendre mon code mais je n'ai pas encore trouvé la solution, d'autant plus que ce qui m'échappe c'est que seul Firefox 3.6.13 ne "comprend" pas le code.
Bref, je vous donne un échantillon de mon code histoire que vous compreniez mieux de quoi il retourne :

Mon script javascript qui positionne mon footer suivant la hauteur de page :

<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('foot');
var footerHeight  = footerElement.offsetHeight-70;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script>


Tout bêtement le code html de mon footer :





<footer id="foot">
<nav>


 accueil | [contact.html contact] | [newsletter.html newsletter] | [mentions-legales.html mentions légales] |  Copyright © 2011 


</nav>
</footer>






Et enfin le css qui se rapporte à mon élément footer :
#foot{
height: 70px;
background-image:url(footer.jpg);
}


Voilà, si quelqu'un parvient à mettre le doigt sur ce qui pêche je suis preneur du tuyau.
Merci ,

BBFUNK01

//C'est en forgeant qu'on devient forgeron... ;-) ;

musichrono

1 réponse

Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

bon et bien j'ai résolu mon problème : du coup il suffisait d'ajouter un display: inherit; dans mon css :
#foot{
display: inherit;
height: 70px;
background-image:url(footer.jpg);
}


Et ainsi sur Firefox 3.6.13 ça marche correctement.

A plus ,

BBFUNK01

//C'est en forgeant qu'on devient forgeron... ;-) ;

musichrono