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 :
Code Javascript :
<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 :
Code HTML :
<body>
<div id="mapage">
<div id="content">
<footer id="foot">
<nav>
<div class="text_foot">
<img src="images/home.png" width="17" height="19"> <a href="http://www.monsite.com" class="liens"><FONT face="arial" size="2" style="line-height:5em;" text-align="center">accueil</FONT></a><FONT face="arial" size="2" text-align="center" color="white"> | </FONT><a href="contact.html" class="liens"><FONT face="arial" size="2" text-align="center">contact</FONT></a><FONT face="arial" size="2" text-align="center" color="white"> | </FONT><a href="newsletter.html" class="liens"><FONT face="arial" size="2" style="line-height:5em;" text-align="center">newsletter</FONT></a><FONT face="arial" size="2" text-align="center" color="white"> | </FONT><a href="mentions-legales.html" class="liens"><FONT face="arial" size="2" text-align="center">mentions légales</FONT></a><FONT face="arial" size="2" text-align="center" color="white"> | </FONT><FONT face="arial" size="2" text-align="center" color="white"> Copyright © 2011 </FONT><img src="images/logo2.png" width="58" height="19">
</div>
</nav>
</footer>
</div>
</div>
</body>
Et enfin le css qui se rapporte à mon élément footer :
Code :
#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