[Résolu] XHTML et float sous IE7

Question

Blaster

30 Oct 2008 à 16:52

Bonjour,

Je suis nouveau sur ce forum.
Je viens vers vous car j'ai un soucis d'affichage en XHTML 1.0 Trans

Sous IE 6, FF, ca passe bien, mais sous IE7 ( peu pas tester car je ne l'ai pas ) et bien mon footer se met en plein milieu, regardez :

http://images4.hiboox.com/images/4408/3a1bb441ce70a2eb068309e257462fb4.jpg

Mon code de la page footer est le suivant :

<div id="footer">
<div id="footer-gauche">Ce site est
d&eacute;clar&eacute; a la <a href="http://www.cnil.fr"
 target="_blank">CNIL</a>
sous le num&eacute;ro 882250 <br />
Site ouvert officiellement depuis le 15/10/2003 .
<a href="http://www.monwebdesign.com" target="blank">R&eacute;alisation
monwebdesign</a></div>
<div id="footer-droite">Copyrights 2003-2008 <a
 href="<?php echo $chemin; ?>/copyrigths.html">phpBB-Graph V4.0</a>
<br />
Site internet d&eacute;pos&eacute; chez un notaire.
</div>
</div>

Et ma CSS ( div )

#bodypage{
	width: 800px;
	height: 100%;
	text-align: left;
	background-image: url(images/bgpage.jpg);
	background-repeat: repeat-y;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	background-position: center;
	float: none;
	}

#ref{
	float: none;
	color: #2A8BBD;
	background-color: #0A3549;
	height: 13px;
	width: 800px;
	padding-left: 0px;
	font-size: 9px;
	text-align: right;
	text-transform: capitalize;
	font-weight: bold;
	letter-spacing: 2px;
	}
	
#header{
	width: 800px;
	height: 140px;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
}

#sous-header{
	width: auto;
	height: 219px;
	background-image: url(images/sous-header.jpg);
	background-repeat: repeat-x;
	}

#blocgauche{
	float: left;
	width: 480px;
	margin-top: 180px;
	margin-left: 15px;
	background-color: transparent;
	padding-right: 0px;
	}

#blocdroite{
	float: right;
	width: 252px;
	height: 100%;
	margin-bottom: 0px;
	margin-top: 10px;
	margin-right: 0px;
	display: block;
	}

#navigation{
	float: left;
	width: 290px;
	text-align: left;
	font-size: 9px;
	}

#raccourci{
	width: 190px;
	float: right;
	}
	
#raccourci-droite{
	text-align: right;
	float: right;
}

#newsletter{
	width: 255px;
	height: 88px;
	background: url(images/newsletter.png);
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-right: 10px;
	}
#espacenewsletter{

	background-color: transparent;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	font-size: 15px;
	font-weight: bold;
	width: 250px;
	}
#espace-newsletter{
	font-size: 9px;
	margin-left: 9px;
	margin-top: 3px;
	width: 250px;
	}

#membres{
	width: 255px;
	height: 93px;
	background: url(images/membres.png);
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 5px;
font-weight: bold;
	padding-right: 10px;
	}
	
#espacemembre{
	width: 250px;
	background-color: transparent;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	font-size: 14px;
	}
#espace-membre2{
	width: 250px;
	font-size: 9px;
	margin-left: 9px;
	margin-top: 3px;
	}
#header-haut{
	float: right;
	width: 560px;
	height: 110px;
	display: block;
}
#menu-haut{
	float: right;
	width: 300px;
	margin-right: 0px;
}

#menu{
	float: left;
	width: 100%;
	height: auto;
	display: block;
	}

#publicite{
	float: left;
	width: 468px;
	height: 60px;
	margin-top: 10px;
	border: 1px solid White;
	margin-left: 20px;
	padding-top: 1px;
	padding-right: 1px;
	padding-left: 1px;
	padding-bottom: 1px;
}

#centre{
	width: 800px;
	background-color: White;
	background-repeat: repeat;
	padding-bottom: 0px;
	height: auto;
	float: right;
	}



#centre-droite{
	width: 265px;
	float: right;
	padding-right: 0px;
	margin-top: 15px;
	}
	
#menu-phpbbgraph{
	background-image: url(images/menu_phpbbgraph.jpg);
	width: 256px;
	height: 44px;
	background-repeat: no-repeat;
	color: Black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 10px;
	text-align: center;
	padding-right: 12px;
	}
	
#menu-designphpbb{
	background-image: url(images/menu_designphpbb.jpg);
	width: 256px;
	height: 44px;
	color: Black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	display: block;
	padding-top: 10px;
	background-repeat: no-repeat;
	padding-right: 12px;
	 }	
	
#menu-ressources{
	background-image: url(images/menu_ressources.jpg);
	width: 256px;
	height: 44px;
	color: Black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 10px;
	text-align: center;
	background-repeat: no-repeat;
	padding-right: 12px;
 }
	
#menu-lesplus{
	background-image: url(images/menu_lesplus.jpg);
	width: 256px;
	height: 44px;
	background-repeat: no-repeat;
	color: Black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 10px;
	text-align: center;
	padding-right: 12px;
 }
 
#menu-partenaires{
	background-image: url(images/menu_partenaires.jpg);
	width: 256px;
	height: 44px;
	background-repeat: no-repeat;
	color: Black;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 10px;
	text-align: center;
	padding-right: 12px;
 }
	
	
#menu1{
	width: 250px;
	background-color: White;
	padding-right: 12px;
}
#menu2{
	width: 250px;
	background-color: White;
	padding-right: 12px;
}
#menu3{
	width: 250px;
	background-color: White;
	padding-right: 12px;
}
#menu4{
	width: 250px;
	background-color: White;
	padding-right: 12px;
}
#menu5{
	width: 250px;
	background-color: White;
	padding-right: 12px;
}

#footer{
	width: 800px;
	background-color: #DCDCDC;
	height: auto;
	background-repeat: repeat;
	float: right;
	}
#contenu{
	width: 509px;
	background-color: #FFFDFF;
	margin-left: 12px;
	margin-top: 0px;
	display: block;
	}
	
#pubgoogle{
	width: 508px;
	height: 68px;
	vertical-align: super;
	border: 1px dotted #EEEEEE;
	text-align: center;
	padding-top: 20px;
	float: right;
}

#table{
	float: left;
	width: 508px;
	}
	
#footer-gauche{
	width: 300px;
	float: left;
	padding-top: 3px;
	padding-left: 3px;
	font-size: 9px;
}

#footer-droite{
	width: 290px;
	float: right;
	padding-top: 3px;
	padding-right: 5px;
	text-align: right;
	display : inline;
}

Merci d'avance car la je seche Smiley decu

Julien
Modifié par Blaster (31 Oct 2008 - 10:57)

fvsch

30 Oct 2008 à 17:01

Bonjour,

Abus clair de positionnement flottant. Il y a facilement quatre ou cinq flottants en trop dans cette page. div#footer par exemple n'a pas de raison d'être flottant.

Blaster

30 Oct 2008 à 17:17

Bonjour,

ce n'est pas moi qui est fait la CSS, pourrais tu m'indiquer quel elements sont en trop exactement ?
et si j'enleve le float du footer-droite, comment faire pour que mon texte qui s'y trouve se place bien a droite car si j'enleve, il se met sous l'autre.

Merci a toi,
Julien

fvsch

30 Oct 2008 à 17:26

Il n'y a pas à priori d'éléments en trop, mais le fait que div#footer soit flottant (en float:right il me semble) est, sauf erreur de ma part, une bêtise. De même pour le conteneur qui le précède. C'était peut-être une tentative du codeur pour résoudre un problème de dépassement des flottants, mais c'est clairement la mauvaise manière.

Blaster

30 Oct 2008 à 19:39

quel est la bonne a utilisé pour éradiquer ce soucis ? Smiley biggrin

fvsch

30 Oct 2008 à 22:34

Blaster a écrit :
quel est la bonne a utilisé pour éradiquer ce soucis ?

Engager un intégrateur web compétent?
Modifié par Florent V. (30 Oct 2008 - 22:34)

Blaster

30 Oct 2008 à 22:50

C'est mon frère qui ma fait l'intégration...

en attendant, personne pour m'aider ?

Blaster

31 Oct 2008 à 10:56

Bon j'ai trouvé, ca n'avais rien a voir avec l'intégrateur, comme quoi...

c'etait une balise include que j'avais mal placé dans un footer, suffisait juste de la mettre 2 <div> avant.

Sujet clos

Sémantique web et HTML

[Résolu] XHTML et float sous IE7