Pied de page décalé [RESOLU]

Bonjour,
Pour arriver à un pied de page comme je le voulais j'ai dû appliquer la technique expliqué dans pompage.net.

Malgré celà j'ai encore un problème de décalage: En fait selon que je mette un height de 15 px ou de 30px à mon pied de page, j'ai également un décalage de 15 ou de 30 px entre le bas de ma fenêtre et mon pied de page.

cf : http://users.skynet.be/rb-gc/

Par contre une fois que je mets assez de <br> dans le div "contenu", là il veut bien se "coller" en bas.

Voici le code css et javascript:

<STYLE type=text/css>
HTML,BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; 
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; 
	HEIGHT:100%;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
#conteneur {
	WIDTH: 100%;
	position:relative;
	background-image:url(decoupe/orange_menu3.jpg);
	background-repeat:repeat-x;
	min-height:100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}

#langue {
	top:20px;
	right:5%;
	width:30px;
	position:absolute;
	margin-right:10px;
	z-index: 2;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#FFFFFF;
}


#header {
	WIDTH:749px;
}

#milieu {
HEIGHT:100%;
WIDTH:100%; POSITION:relative;
BACKGROUND-IMAGE: url(decoupe/accueil.jpg); BACKGROUND-REPEAT:no-repeat;
}

#blok {
width:750px;
visibility:hidden;
z-index:0;
}

#contenu {
	MARGIN-RIGHT: 298px;
	position:relative;
}

#droite {
	RIGHT: 0px;
	TOP: 0px;
	WIDTH: 250px;
	POSITION: relative;
	HEIGHT: 300px;
	background-color:#E8E8E8;
	filter: alpha(opacity=50);
	-moz-opacity:0.5; /* Mozilla */
	-khtml-opacity: 0.5; /* Safari */
	opacity: 0.5;
	float: right;
}

html>body #milieu {
    height: auto;
}


#pied {
	BACKGROUND-COLOR: #E8E8E8;
	height:30px;
	position:relative;
	width:100%;
	bottom:0;
	clear:both;
	z-index:9;
	filter: alpha(opacity=50);
	-moz-opacity:0.5; /* Mozilla */
	-khtml-opacity: 0.5; /* Safari */
	opacity: 0.5;
}



.langue{
	
	list-style-image:url(decoupe/puces/puce_langue.jpg);
	
}

.langue A {
	COLOR: #FFFFFF; 
	TEXT-DECORATION: none;
}
.langue A:hover {
	
	TEXT-DECORATION: underline;
}

.menugauche {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menugauche LI {
	MARGIN-BOTTOM: 5px
}
.menugauche A {
	MARGIN: 0px 2px; COLOR: #000000; TEXT-DECORATION: underline
}
.menugauche A:hover {
	TEXT-DECORATION: none
}
P {
	MARGIN: 0px 0px 10px
}
</STYLE>

<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('conteneur').offsetHeight;
					var footerElement = document.getElementById('pied');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
					}
					else {
						footerElement.style.top = '0px';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script>

Modifié par yannick (09 Jun 2005 - 17:25)

bonjour,

ça ne marcherait pas mieux en enlevant le

position : relative;

dans ton #pied

Sur mon site, cela fonctionne

ça ne fonctionne malheureusement pas.
Quand j'enlève cette ligne, le "footer" vient se coller directement après mon texte mais il ne reste pas en bas de la page.

Merci quand même!
Si quelqu'un d'autre a une idée ...
Modifié par yannick (09 Jun 2005 - 12:28)

Heu j'ai bien peur de ne pas comprendre ton probleme,
sous firefox, ton pied de page ma parait tout a fait normal,

meme en editant le css (Webdevellopeur) pour mettre un height de 15px, ton pied de page reste en pied de page...

J'ai trouvé la solution,
En fait je devais soustraire encore une fois la valeur de la hauteur de mon div (15 px en l'occurence) dans le code javascript ...

Merci à vous

PS: Je n'ai pas essayé sous firefox donc je ne savais pas que ça fonctionnait, mais en tous cas sous IE il y avait un décalage.