Footer parfait sauf pour IE [RÉSOLU]

Personne ne m'a aidé pour ce post http://forum.alsacreations.com/topic-4-13630-1-Bacground-qui-ne-suit-paset-footer-qui-nest-gure-mieux.html concernant le bacground de mon conteneur qui ne suivait pas. Puisque je n'ai pas réussi à le comprendre par moi-même, j'ai dû faire avec et ai donc dupliqué des éléments de ma feuille de style pour les adapter à chacune des pages.

Mais voilà, j'aimerais bien pouvoir inscrire sur ce site qu'il est conforme xhtml et css. Mais voilà, le footer dans IE est décalé et le fait disparaître. Je peux vivre avec évidemment, mais puisqu'il est conforme, j'aimerais bien pouvoir l'indiquer.
Voici l'adresse de ma copie de travail http://citronlime.com/ ainsi que ma feuille de style:

* {
margin: 0;
padding: 0;
}

body {
background: #000033 url("images/bg.gif") repeat;
text-align: center;
font: normal 11px/18px verdana, arial, tahoma, sans-serif;
color: #333;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#header {
width: 582px;
height: 210px;
background: #000 url("images/header.gif") no-repeat;
position: absolute;
top: 0;
left: 0;
background-position: top right;
}

#conteneur {
width: 582px;
min-height: 800px;
height: 832px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

#conteneur1 {
width: 582px;
min-height: 800px;
height: 1298px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

/*autres conteneurs, un pour chacune des pages*/

#conteneur2 {
width: 582px;
min-height: 800px;
height: 1320px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

#conteneur3 {
width: 582px;
min-height: 800px;
height: 1320px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

#conteneur4 {
width: 582px;
min-height: 800px;
height: 1135px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

#conteneur5 {
width: 582px;
height: 1320px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

h1 {
width: 140px;
height: 30px;
background-color: #333;
margin: 211px 1px 1px 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}

h1:first-letter {
color: #f00;
text-decoration: underline;
}

h2 {
width: 421px;
height: 30px;
background-color: #333;
margin: 211px 0 0 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}

h3{
	color:#000066;
	padding: 10px 0px;
}

#tril {
	background:  url(images/tril.gif) no-repeat;
	height: 830px;
	position: absolute;
	top: 0px;
	width: 100px;
	margin-top: -41px;
	left: -106px;
}

#nav {
list-style: none;
position: absolute;
z-index: 2;
border-right: 1px solid #fff;
height: 210px;
position: absolute;
top: 0;
left: 0;
}

#nav li a {
color: #fff;
font: normal 11px/24px verdana, arial, tahoma, sans-serif;
display: block;
width: 140px;
height: 24px;
background-color: #000;
border-bottom: 1px solid #fff;
padding-left: 10px;
text-decoration: none;
}

#nav li a:hover {
background-color: #333;
}

#current a {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
}

#sidebar {
	width: 132px;
	float: left;
	left: -151px;
	position: relative;
	left: -151px;
	border-top: 1px solid #fff;
	font: normal 10px/18px verdana, arial, tahoma, sans-serif;
	padding: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
/*\*/
	margin-bottom: 120px;
	
}

img {
border: none;
}

a img {
display: block;
margin-bottom: 20px;
border: 1px solid #fff;
}

a:hover img {
border-color: #f00;
}

#contenu {
position: absolute;
top: 260px;
left: 160px;
}

p {
margin-bottom: 20px;
}


#footer {
	clear:left;
	display:block; 
	margin-top: 52px; 
	margin-left: -160px;
	padding: 0pt 0px 0pt 0pt; 
	background: transparent url(images/footer.gif) no-repeat scroll left top; 
	width: 592px; 
	height: 32px;  
	overflow: hidden;
}
#foot_left {
	float:left;
	margin:5px 0px 0px 23px;
	width:120px;
	}
#foot_right {
	float:right;
	margin:5px 5px 0px 0px;
	text-align:right;
	width:400px;
	clip: rect(200px,auto,auto,auto);
	}
#footer a{
color:#000099
}
#footer a:visited{
color:#666666
}
#footer a:hover{
color:#CC0000
}
/*autre footer*/

#footer1 {
	display:block; 
	margin-top: 342px; 
	margin-left: -160px;
	padding: 0pt 0px 0pt 0pt; 
	background: transparent url(images/footer.gif) no-repeat scroll left top; 
	width: 592px; 
	height: 32px; 
	clear: both; 
	overflow: hidden;
}

#footer1 a{
color:#000099
}
#footer1 a:visited{
color:#666666
}
#footer1 a:hover{
color:#CC0000
}

Modifié par largowin (09 May 2006 - 23:58)

bonjour,

j'avais vu l'autre post, mais sans avoir vue de footer ni dans ff ou IE.
A mon avis , je n'ai pas eté le seule a ne pas comprendre ou voir qu'elle etait ton probleme.

La raison pour la quelle ton footer est en partie invisible dans IE est du au fait que tu le repositionne en marge negative (-160px , exactement la portion qui manque) et qu'il sort de son conteneur, cette partie est donc invisble (comportement classique dans IE) Un "overflow:visible;" peut peut-etre suffire.
sinon, un z-index:1; avec un position:relative; (ou absolute) pour l'activé.

Mais je mettrai plutot le footer en dehors et en fin de flux.
Un clear both (tres classique), suffira a faire en sorte qu'il ne remonte jamais sur le menu si le contenu est trop court..


:) un lien de validation xhtml1.1 pour un document en html 4.01.
... ça ressemble a ... ,

bon courage en tout cas et bonne continuation

gcyrillus a écrit :
:) un lien de validation xhtml1.1 pour un document en html 4.01.
... ça ressemble a ... ,

Oups.... petit moment d'inattention... J'ai changé le doctype. Merci!

Pour le reste, j'ai réussi à résoudre le problème avec z-index (que je ne comprends pas encore très bien...).

Merci mille fois!!!!
Modifié par largowin (01 May 2006 - 01:39)

bonjour,

heu, le "overflow:visible;" etait a appliqué/testé sur le conteneur du footer et pas le footer lui même.

Il est inutile pour #footer.

le z-index.
La page est par defaut situé a 0.

Pour positionné un element de la page par rapport a un autre (en epaisseur) . Il y a le z-index.

Par exemple si plusieurs elements sont disposés en absolute sur la même zone, le dernier affiché cachera les autres.

En appliquant un z-index different a chacun de ces elements, la valeur la plus forte viendra s'afficher devant les autres .

Il est possible aussi d'utiliser des valeurs negatives , 0 correspond au niveau de la page html , une valeur negative repassera l'element concerné "derriere/en dessous" .Une couleur ou une image appliqué au fond de body suffira a cacché cette balise.

Le position:relative; ou absolute; permet aux element et z-index de se "situé" mutuellement ou par rapport a la page.

<edit>il ya surement des liens plus "clair" et "techniques" , je n'en ai pas sous la souris </edit>

++
Modifié par gcyrillus (01 May 2006 - 14:43)

gcyrillus a écrit :


<edit>il ya surement des liens plus "clair" et "techniques" , je n'en ai pas sous la souris </edit>

++

Non, c'est parfaitement clair, je t'en remercie. J'ai de plus lu la section du livre de Raphaël à ce sujet (je n'étais pas rendu à cette page encore).

J'ai fait les correctifs nécessaires. Merci encore et bonne journée!