28173 sujets

CSS et mise en forme, CSS3

Décalage sous IE6

J'ai fait un site web toujours centré dans la page (optimiser pour du 1024x768), le site est entouré d'une bordure double de 2px. J'ai fait un conteneur div pour les bordures, et a l'intérieur un autre conteneur pour le contenu du site. Sous IE7 et Firefox tout va tres bien, mais sous IE6...le haut du site décale de la bordure. J'ai l'impression que le bug vient de la propriété position:absolute de mon CSS, mais je n'ai pas trouver comment regler le probleme.

Voici le html de la page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Liaison Concept</title>
</head>
<body>
	<div class="containerBordures">
    	<div class="haut">
			<div class="hautGauche"></div>
			<div class="hautDroite"></div>
		</div>
		<div class="milieu">
			<div class="milieuGauche"></div>
			<div class="milieuDroite"></div>
        	<div class="containerPrincipal">
        	<table class="tablePrincipal" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
            <tr>
            	<td rowspan="3" class="indexGauche"></td>
                <td colspan="2" class="indexTopDroit"></td>
            </tr>
            <tr>
            	<td class="indexBoutonEntrer"><a id="entrer" href="accueil.php" onmouseover="menu_onmouse_1.src='img/intro_entrer_on.gif'; popup('entrer','entrer')" onmouseout=          "menu_onmouse_1.src='img/intro_entrer_off.gif'; popdown()"><img name="menu_onmouse_1" src="img/intro_entrer_off.gif" border="0" alt="" /></a></td>
                <td class="indexSideBouton"></td>
            </tr>
            <tr>
            	<td colspan="2" class="indexBottomDroit"></td>
            </tr> 	 
            </table>
   		</div>
       </div>
       <div class="bas">
			<div class="basGauche"></div>
			<div class="basDroite"></div>
		</div>
    </div>
</body>
</html>


Et voici les propriétés CSS 


body {
	background-color: #595539;
	margin: 0;
}

.containerBordures {
	width: 764px;
	height: 550px;
	position: absolute; 
	left: 50%;
	top: 50%;
	margin-left: -382px;
	margin-top: -275px;
	overflow:hidden;
}

.indexGauche {
	height: 546px;
	width: 220px;
	background-color:#FFFFFF;
}

.indexTopDroit {
	height: 393px;
	width: 540px;
	background-color:#FFFFFF;
	background-image:url(../img/intro_logo.gif);
}

.indexBoutonEntrer {
	height: 11px;
	width: 58px;
	background-color:#FFFFFF;
}

.indexSideBouton {
	height: 11px;
	width: 482px;
	background-color:#FFFFFF;
}

.indexBottomDroit {
	height: 142px;
	width: 540px;
	background-image:url(../img/intro_bande_bas.gif);
	background-repeat:repeat-x;
}

.containerPrincipal {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width: 760px;
	height: 546px;
	float:left;
}

.haut {
	background-image:url(../img/border_top.gif);
	background-repeat:repeat-x;
	width: 764px;
	height: 2px;
	clear:both;
	float:left;
}
.hautGauche {
	background-image:url(../img/border_top_left.gif);
	float:left;
	width: 2px;
	height: 2px;
}
.hautDroite {
	background-image:url(../img/border_top_right.gif);
	float:right;
	width: 2px;
	height: 2px;
}
.milieu {
	clear:both;
	width: 764px;
	height: 546px;
	overflow:hidden;
	float:left;
}
.milieuGauche {
	background-image:url(../img/border_left.gif);
	background-repeat:repeat-y;
	float:left;
	width: 2px;
	height: 546px;
}
.milieuDroite {
	background-image:url(../img/border_right.gif);
	background-repeat:repeat-y;
	float:right;
	width: 2px;
	height: 546px;
}
.basGauche {
	background-image:url(../img/border_bottom_left.gif);
	float:left;
	width: 2px;
	height: 2px;
}
.basDroite {
	background-image:url(../img/border_bottom_right.gif);
	float:right;
	width: 2px;
	height: 2px;
}
.bas {
	background-image:url(../img/border_bottom.gif);
	background-repeat:repeat-x;
	width: 764px;
	height: 2px;
	clear:both;
	float:left;
	overflow:hidden;
}

.tablePrincipal {
	height: 546px;
	width: 760px; 
}
Sujet clos
Aller à