Div toujours eparpillées sous IE

bonsoir,

j'avais deja posté a ce sujet mais rien ne marche,
le site fonctionne partout sauf sur IE http://meublesloizeau.com
je pense que c'est un probleme de "position: fixed" sous IE qui n'est pas reconnu

si quelqu'un a une solution ? je vous en serait reconnaissante


voici les styles

header {
	width: 1024px;
	margin-left: -512px;
	left: 50%;
	position: fixed;
	z-index: 1;
	height: 136px;
	background: url(images/fond_head.png) no-repeat;
	padding-top: 15px;
	display:block
	}
nav {
	float: left;
	height: 300px;
	width: 264px;
	display:inline;
	position: fixed;
	padding-top:0px;
	display:block
}
section {
	width: 500px;
	margin-right: 250px;
	float: right;
	text-align: left;
	display:block
}



#milieu {
	height: 500px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 156px;
}
body {
	margin: 0px;
	background: url(images/wallpaper.jpg) repeat;
}


footer {
	background: url(images/wood.jpg);
	height: 300px;
	position : fixed;
	top: 85%;
	width: 2006px;
	margin-left: 50%;
	left: -1003px;
	z-index:1;
	display:block
}


#gauche_bas {
	position: absolute;
	right: 1250px;
	top: -200px;
}
#cage {
	
	position: absolute;
	right: 650px;
	top: -130px;
}
#chaise {
	position: absolute;
	right: 380px;
	top: -130px;
	
}
#tapis {
	
	
	position: absolute;
	right: 750px;
	top: -4px;
}



#logo {
	float: left;
	position: absolute;
}
#bd {
	float: right;
	position: absolute;
	top: 0px;
	right: 0px;
	
	
}
h1 {
	float: left;
	position: absolute;
	left: 280px;
	font: 2em Georgia, "Times New Roman", Times, serif;
	color: #948177;
	text-shadow:  #FFF 1px 1px 1px; 
	margin-top: 46px;
	
}
#label {
	background: url(images/label.png);
	height: 200px;
	width: 200px;	
	
}


nav a{
	color: #948177;
	text-decoration: none;
	letter-spacing: 1px;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px; 
	
}

nav li{
	
	text-align: right;
	padding-right: 30px;
	padding-top: 10px;
	
}

nav li li{
	
	text-align: right;
	padding-right: 10px;
	padding-top: 0px;
	
}

nav ul li a{

	font-size: 120%;	
}

nav ul li ul li a{

	font-size: 90%;	
}

nav ul {

	list-style-type: none;
}

nav a:hover{
	color: #42210B;
	
}
p {
	color: #42210B;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px;
	text-align: left;
}











div#galerie 
{ 
    width: 500px ; 
    background: #eed ; 
    border: 1px solid #dcb ; 
    padding: 0px ; 
    margin: 0px 0px ; 
    text-align: center ; 
    font: 0.9em Georgia, serif ; 
} 
 
 
 div#galerie2 
{ 
    width: 500px ; 
    background: #eed ; 
    border: 1px solid #dcb ; 
    padding: 0px ; 
    margin: 0px 0px ; 
    text-align: center ; 
    font: 0.9em Georgia, serif ; 
}
ul#galerie_mini 
{ 
    margin: 0 ; 
    padding: 0 ; 
    list-style-type: none ; 
} 
 
ul#galerie_mini li 
{ 
    float: left ; 
} 
 
ul#galerie_mini li a img 
{ 
    margin: 2px 4px ; 
    border: 1px solid #dcb ; 
} 
 
dl#photo 
{ 
    clear: both ; 
    margin: 0 auto ; 
} 
 
dl#photo dt 
{
	font: italic 1em/1em Georgia, serif;
	color: #dcb;
} 
 
dl#photo dd 
{ 
    margin: 0 ; 
} 
 
dl#photo img 
{ 
    border: 1px solid #dcb ; 


} 




#mac {
	position: absolute;
	right: 1400px;
	top: -150px;
}
#plan {
	position: absolute;
	right: 1275px;
	top: -200px;
}
#pencils {
	position: absolute;
	right: 1100px;
	top: -80px;
}
.numeros {
	font-size: xx-large;
	font-style: oblique;
	text-align: center;
}
#images_gallerie img {
	margin-top: 30px;
	margin-bottom: 35px;
}
#milieu a {
	text-align: center;
}
#contemporain1 {
	position: absolute;
	right: 1250px;
	top: -168px;
	
}
#oiseau1 a {
	border-width: 0px;
	border-style: 0;
	list-style: url(none) none;
}
a {
	color: #6B5E54;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#style1 {
	
	
	position: absolute;
	right: 1250px;
	top: -230px;
}


#style2 {
	
	position: absolute;
	right: 400px;
	top: -100px;
}
#oiseau1 {
	position: absolute;
	right: 1062px;
	top: -400px;
	text-decoration: none;
	border-width: 0px;
}
#oiseau2 {
	
	position: absolute;
	right:800px;
	top: -400px
}
#table_contact {
	position: absolute;
	right: 1250px;
	top: -165px;
}
#copeaux {
	
		position: absolute;
	right: 400px;
	top: -60px;
}


#news {
	
	position: absolute;
	right: 600px;
	top: -80px;
}
#centré p {
	text-align:center
}
#diapo {
	height: 560px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: px;
	cursor: main;
}
#FlashID {
	margin-right: auto;
	margin-left: auto;
	height: 560px;
	width: 800px;
}
#strong {
	font: 2em Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px;
	color: #42210B;

}

Bonjour, ton script pour html5 ne fonctionne pas. Il te manque l'attribut type dans l'appel de celui-ci. Donc, ie ne reconnaît pas les éléments.


En plus, il faut revoir ceci:

footer { 
    background: url(images/wood.jpg); 
    height: 300px; 
    position : fixed; 
    top: 85%; 
    width: 2006px; /* serait mieux à width: 100 %; */
    margin-left: 50%; /* inutile */
    left: -1003px; /* serait mieux à left: 0; */
    z-index:1; 
/*   display:block  ceci est inutile */
} 

Ensuite, tu changes ta façon de positionner les éléments contenus dans ton footer. Évite autant que faire ce peu de mettre des positionnements négatifs.

À lire et méditer: Initiation au positionnement css
Modifié par Mabelle (31 Jan 2011 - 20:23)

Le probleme c'est qu'en changeant ces propriétés,
lorsque l'on reduit la fenetre le footer ne reste pas au milieu de la page
Modifié par anaisl (31 Jan 2011 - 20:22)

Oui bon, à toi de travailler ton positionnement. Je n'ai fait que quelques tests rapides.

Si tu veux fixer un div avec EI, il faut utiliser un js.
http://www.howtocreate.co.uk/fixedPosition.html

Salut,

Ton site ne fonctionne pas partout sauf sur IE, chez moi la page d'accueil est OK mais dès qu'on clique sur un lien les div sont éparpillées partout sur Firefox 3.6 windows XP.
Et en inspectant le code, firebug ne trouve AUCUN style CSS pour la balise footer.

De toutes façon ton positionnement est mal géré, lis le lien que t'as donné Mabelle et corrige tes erreurs en conséquences.

Tes CSS sont aussi très farfelues par exemple pour nav tu mets en premier float left, ensuite display inline ensuite position fixed et enfin tu le remets en display block !?

Essaie d'abord de clarifier tes CSS, de retirer tout le code superflu et ensuite tente de corriger tes erreurs en reprenant le positionnement de tout tes éléments dans l'ordre d'apparition (html). Tu dois positionner autant que possible tes éléments les uns par rapport aux autres avec des margin et padding pour espacer tes éléments.
Et tu n'utilises le positionnement (relatif absolu ou fixe) qu'en dernier recours pour obtenir un positionnement spécifique.

Par exemple tu peux utiliser fixe pour positionner ton footer en permanence en bas, mais nul besoin de positionner les éléments à l'intérieur de ton footer en absolu.

Et pour IE tu as bien créé tes éléments header, footer etc en Javascript pour pouvoir les styler ? Pour rappel IE jusqu'à sa version 8 ne reconnait pas les éléments html5 et donc ne leur applique aucun style. Pense à rajouter également un display block aux nouvelles balises html5 appropriées (header, footer, nav...) qui sont considérées par défaut comme des éléments en display:inline (en css).
A+