Bonjour à tous !
Je poste à nouveau un message car j'ai un léger problème au niveau de mes feuilles de styles et de l'organisation de mes divs. En effet, j'ai créer une ébauche d'un site qui fonctionne parfaitement sous IE 7 et IE 6 en revanche sous FireFox j'ai quelques problèmes de décalage... Voyez par vous même ;-)
SOUS IE 7
http://www.servimg.com/image_preview.php?i=5&u=10054098
SOUS FIREFOX
http://www.servimg.com/image_preview.php?i=6&u=10054098
Voici le code CSS :
<style type="text/css">
a:link {color:#000000; text-decoration: underline;}
a:visited {color:#FFFFFF;font-weight:bold;}
a:hover {color:#66CCFF;font-weight:bold;}
.DivBodyHaut {
background-image:url(Images/body2/body_01.png) ;
background-repeat:no-repeat;
background-position:center;
height: 65px;
width : 470px ;
}
.DivConteneurBODY {
float:left ;
width:470px;
}
.DivBodyCentre {
background-image:url(Images/body2/body_02.png);
background-repeat:repeat-y;
background-position:center;
width : 470px ;
margin-left:auto ;
margin-right:auto ;
}
.DivBodyBas {
background-image:url(Images/body2/body_03.png) ;
background-repeat:no-repeat;
background-position:center;
height: 65px;
width : 470px ;
}
.DivBaner {
background-image:url(Images/baniere.png);
background-repeat:no-repeat;
background-position:center;
width: 745px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.DivFace {
width: 745px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
.ConteneurExtGauche{
float:left;
width:137px;
}
.ConteneurExtDroit{
float:right;
width:137px;
}
.DivExtHaut {
background-image:url(Images/bords/bords_01.png) ;
background-repeat:no-repeat;
background-position:center;
height: 50px;
width : 137px ;
}
.DivExtCentre {
background-image:url(Images/bords/bords_02.png) ;
background-repeat:repeat-y;
background-position:center;
width : 137px ;
}
.DivExtBas {
background-image:url(Images/bords/bords_04.png) ;
background-repeat:no-repeat;
background-position:center;
height: 50px;
width : 137px ;
}
.StyleDeca {
margin-left:14px;
}
body {
background-image:url(Images/Background.png);}
</style>
Et le code HTML :
<!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>
<link rel="stylesheet" href="styleIE7.css"/>
<!--[if lte IE 6]>
<link href="styleIE6inf.css" rel="stylesheet" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
<script language="javascript" type="text/javascript"> // SCRIPT POUR ENLEVER LE GRIS DES PNG SOUS IE6
function IEpng(img)
{
if (document.all && (IEver=parseFloat(navigator.appVersion.split("MSIE")[1])) && (IEver>=5.5)
&& (IEver<7) && document.body.filters && img)
{
imgName=img.src.toUpperCase();
if (imgName.substring(imgName.length-3,imgName.length)=="PNG")
{
img.outerHTML =
"<span "
+(img.id?"id='"+img.id+"' ":"")
+(img.className?"class='"+img.className+"' ":"")
+(img.title?"title=\""+img.title+"\" ":"")
+"style=\"width:"+img.width+"px;height:"
+img.height+"px;"
+(img.align=="left"?"float:left;":(img.align=="right"
?"float:right;":""))
+(img.parentElement.href?"cursor:hand;":"")
+"display:inline-block;"+img.style.cssText+";"
+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+img.src
+"',sizingMethod='scale');\"></span>";
}
}
}
</script>
<body>
<!-- MISE EN PLACE DU HEADER + CONNEXION><!-->
<div class="DivBaner">
<p> </p>
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="82%" align="right"><img src="Images/login.png" width="50" height="20" /></td>
<td width="18%"><input name="textfield" type="text" size="15" /></td>
</tr>
<tr>
<td align="right"><img src="Images/Password.png" width="80" height="20" /></td>
<td><input name="textfield2" type="text" size="15" /></td>
</tr>
<tr>
<td> </td>
<td><img src="Images/connexion.png" width="80" height="20" /></td>
</tr>
</table>
<!-- FIN DU HEADER + CONNEXION><!-->
<p> </p>
</div>
<p> </p>
<div class="DivFace">
<div class="ConteneurExtGauche">
<div class="DivExtHaut"></div>
<div class="DivExtCentre">
<p class="StyleDeca"> </p>
</div>
<div class="DivExtBas"></div>
</div>
<div class="ConteneurExtDroit">
<div class="DivExtHaut"></div>
<div class="DivExtCentre">
<p> </p>
</div>
<div class="DivExtBas"></div>
</div>
<div class="DivConteneurBODY">
<div class="DivBodyHaut"></div>
<div class="DivBodyCentre">
<p class="StyleDeca"> </p>
</div>
<div class="DivBodyBas"></div>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
Merci d'avance à tous ceux qui pourront me fournir une aide précieuse.
Configuration: Windows XP
Internet Explorer 7.0
Acheter awp par console sur css
