Bonjour,
Quelquechose m'échappe pour que mon site fonctionne sur internet explorer. Il s'agit du bas de page "footer" qui se retrouve en plein milieu de la page. Sur Firefox aucun souci. Quel code rajouter ?? merci pour votre aide.

Code css
[code]body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
	color: #666666;
	background: #ffffff url(images/background-header.jpg) repeat-x top;
}

div#site {
    text-align:left;
    width: 1000px;
	margin: auto;
	height:100%;
}

/* ------------------------------------ */

div#header {
    background: url(images/header.png) no-repeat 0 0;
    height: 171px;
    margin: 0;
    padding: 0;
}

div#sous-header {
    height: 34px;
    margin: 0;
    padding: 0;
}

div#mh {
	margin-left: 70px;
}

div#mh a, div#mh a:link {
	float: left;
	padding-right: 50px;
	padding-top:10px;
	font-family: Verdana;
	font-size: 10px;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;	
}

/* ------------------------------------ */

div#corp {
	background: url(images/corp.jpg) repeat-y;
}
div#left {
	float: left;
	width: 318px;
	margin: 0px;
	padding: 0px;
	background: url(images/left-background.jpg) repeat-y;
}

div#contenu-left {
	background: url(images/left-top.jpg) no-repeat;
    padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 63px;
	padding-right: 25px;
}

div#title {
	background: url(images/title.jpg) no-repeat;
	height: 26px;
	width: 216px;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-left: 10px;
    font-family: "Trebuchet MS", Times, Verdana;
    font-size: 12px;
	color: #195B26;	
	font-weight : bold;
}

div#contenu-menu {
	padding-bottom: 0px;
	padding-left: 10px;
	padding-bottom: 18px;
}
#menu_gauche {
	margin:0;
	padding:0;
	 list-style: none;
}
#menu_gauche li {
padding-left: 18px;
background: transparent url(images/triangle.gif) center left no-repeat;
margin-bottom:6px;
font-size:1.3em;
}

div#menu a {
    color : #195B26;
    font-weight : bold;
	font-size: 11px;
	height: 10px;
}

div#right {
    width:682px;
	float:left;
}

div#arbo {
    padding-top: 10px;
	padding-bottom: 35px;
	padding-left: 0px;
	padding-right: 70px;
}

div#contenu-right {
	background: url(images/right-top.jpg) no-repeat;
    padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 0px;
	padding-right: 70px;
}


/* ------------------------------------ */

#footer {
    height:33px;
	width:100%;
	margin:0 auto;
	padding:0;
	background: url(images/background-footer.jpg) repeat-x bottom;
	background-color: #2d9752;
	text-align:center;
	clear: both;
	margin-top:-42px;
}

#footer p {
    padding-top: 12px;
    font-size: 10px;
	color: #FFFFFF
}

#footer a {
    color : #FFFFFF;
    font-family:verdana;
    text-decoration:none;
}

#footer a:hover , a:active , a:focus {
    color : #FFFFFF;
    font-weight : bold;
    text-decoration:none;
}


/* ------------------------------------ */

html, body { 
    margin: 0;
	padding: 0;
	height:100%;
}

span.spacer {
	height:0.01em;
	overflow:hidden;
	display:block;
	width:100%;
	clear:both;
}

img { border: 0; }

a {
    color : #666666;
    font-family:verdana;
    text-decoration:none;
}

a:hover , a:active , a:focus {
    color : #c80523;
    font-weight : bold;
    text-decoration:none;
}
h4 {
	font-size: 15px;
	font-weight: bold;	
	margin-bottom: 15px;
	font-family:trebuchet MS;
color: #c80523;	
}
h3 {
	font-size: 15px;
	font-weight: bold;
	color: #c80523;
	margin-bottom: 13px;
	font-family: "Trebuchet MS", Times, Verdana;
}

[/code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta NAME="AUTHOR" CONTENT="ANDRE GUICHETEAU" />
<meta NAME="RATING" CONTENT="site professionnel, maçonnerie, prefabriqué béton" />
<meta NAME="DESCRIPTION" CONTENT="ENTREPRISE GUICHETEAU, entreprise vendeenne de construction de batiments public ou privé en éléments préfabriqués en béton pour le secteur agricole et le secteur du bâtiment: petites et moyennes entreprises privées, entreprises nationales et travaux publics." />
<meta NAME="KEYWORDS" CONTENT="habitat, permis de construire, maçonnerie, construction, préfabrication, pré-fabrication, pre-fabrication, prefabrication, fabrication, conception, pose, éléments, elements, element, élément, beton, béton, arme, armé, longrines, longrine, poutres, poutre, mur, murs, ouest, france, architechtonique, escaliers, escalier, prefa, préfa, produits, produit, construction, constructions, francais, français, gradins, vendée, vendee, pays de loire, poitou charente, bretagne, materiaux, matériaux, panneaux, caillebotis, sous-traitant, plancher, planchers, poteau, poteaux, btp, fabriquant, fabriquants, fosse, fosses, lisier, balcon, balcons, corniche, corniches, caniveau, caniveaux, stabulation, porcherie, porcheries, cloture, clotûre, mise aux normes, qualibat, iso, 9002, tertiaire, collectivites, collectivités, habitation, logement, logements, tp, TP, soutenement, quai, stockage, accoustique, isolé, isole, isolés, isoles, structure, facade, façade, bardage, bardages, mobilier urbain, tri selectif" />
<meta NAME="subject" CONTENT="construction d éléments préfabriqués en béton en Vendée">
<meta NAME="LANGUAGE" CONTENT="FR">
<title>gros oeuvre - entreprise guicheteau</title>	
<link type="text/css" rel="stylesheet" media="screen" href="style.css" />
</head>
<style type="text/css">
div#contenu-menu2 {
	padding-bottom: 0px;
	padding-left: 0;
	padding-bottom: 15px;
}
#paragraphe {
background: url('images/gros_oeuvre.jpg') top left no-repeat;
height:750px;
width:652px;
}

</style>
<body>

<div id="site">
    <div id="header"></div>
    <div id="sous-header">
        <div id="mh">
            <a title="accueil" href="index.html">ACCUEIL</a>
            <a title="Entreprise Guicheteau André" href="entreprise.htm">ENTREPRISE</a>
            <a title="Gros Oeuvre" href="gros_oeuvre.htm">GROS OEUVRE</a>
			<a title="Habitat" href="habitat.htm">HABITAT</a>
            <a title="Agricole" href="agricole.htm">AGRICOLE</a>
        </div>
    </div>
    <div id="corp">
    <div id="left">
        <div id="contenu-left">
           <div id="title">ENTREPRISE GUICHETEAU</div>
          <ul id="menu_gauche">
                <li><a href="recrutement.htm" title="recrutemnt">Recrutement</a></li>
                <li><a href="acces.htm" title="plan d'acces">Plan d'accès</a></li>
				<li><a href="contact.htm" title="contact">Contactez-nous</a></li>
          </ul>
            <br />
            <br />
            <div id="contenu-menu">
				Entreprise Guicheteau<br />
                Z.
            </div>
			<div id="contenu-menu2">
<img src="images/gros_oeuvre2.jpg" alt="gros oeuvre" /></div>
      </div>
    </div>
    <div id="right">
      <div id="contenu-right">
            <div id="arbo">
                <strong>Vous &ecirc;tes ici :</strong> <i><a href="index.html">Accueil</a> > Recrutement</i>
            </div>
            <h3>GROS OEUVRE</h3>
<div id="paragraphe">
<img src="images/marche_public.gif" alt="" style="float:right;width:300px;padding-right:28px;" />
 <img src="images/marche_prive.gif" alt="" style="float:left;width:300px;padding-left:28px;margin-top:15px;" />         
</div>
</div>
    </div>
    </div>
<div id="margepied"></div>    
</div>
<span class="spacer">-</span>

<div id="footer">
    <p></p>
</div>
</body>

</html>

Modifié par cpepette (19 Oct 2008 - 14:39)
Bonjour cpepette Smiley smile

Juste pour tester, si tu insères dans ta page html un break avec une class et que tu attributs un "clear:both;" à ce break dans ta css, est ce que ton pied de page redescend à sa place ?

<br class="pouf_pouf" />


L'idée étant que le "clear:both;" placé sur le pied de page n'est peut être pas au bon endroit ou pas suffisant Smiley cligne
Bonjour,

D'abord corriger ton Doctype qui est faux, ça ne règlera pas forcément ton problème mais çà sera fait Smiley cligne :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD [#red]X[/#]HTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

margin-top:-42px;

je n'ai jamais utilisé les marges négatives mais est-ce que ton problème ne viendrai pas de là par hasard ?
Modifié par scott54 (19 Oct 2008 - 20:26)
bonjour cpepette,

div#site {
text-align:left;
width: 1000px;
margin: [b]0[/b] auto; /* le 0 était absent */
[b]min-height:100%;[/b] /* au lieu de height */
}


Enlever le margin-top -42px de #footer comme te l'a indiqué scott54 et supprimé également le clear:both;

Je suppose que ce min-height (height) est présent au cas ou le contenu est assez court et que tu veuilles qu'il prenne la totalité de la hauteur, si ce n'est pas le cas, il est inutile.

Si c'est le cas IE6 ne prendra pas en compte ce min-height il faudra alors faire une feuille de style spécifique via commentaires conditionnels pour lui indiquer (heigh:100%)

Par contre je pense que tu y gagnerais à simplifier ton code et le commenter (div inutiles, classes qui pretent à confusion)

EDIT:

<span class="spacer">-</span> est mal placé il devrait être à l'intérieur de #site car dans cette position il n'agit pas dessus.

Mets des couleurs ou des bordures à tes différents div et tu verras les problèmes que pose ta structure.
Modifié par knarf (19 Oct 2008 - 00:06)
Merci pour tous vos conseils, clairs et nets ... je vous donne le résultat dès la correction de tout ça !!