Sujet Précédent Sujet Suivant

CSS + Javascript qui foire sur Firefox 3.6.13

Résolu
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 - 1 mars 2011 à 19:30
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 - 2 mars 2011 à 19:44
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

Réponse 1 / 1
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 6
2 mars 2011 à 19:44
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
3

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
CSS MAP et AREA
gabs77 -
gabs77 -

9 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Rogner une image
Galmiza -
Galmiza -

3 réponses
Rejoignez-nous