Problèmes sous FireFox avec CSS
Résolu
Terraforgeur
Messages postés
51
Date d'inscription
Statut
Membre
Dernière intervention
-
Sim -
Sim -
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://servimg.com/image_preview.php?i=5&u=10054098
SOUS FIREFOX
http://servimg.com/image_preview.php?i=6&u=10054098
Voici le code CSS :
Et le code HTML :
Merci d'avance à tous ceux qui pourront me fournir une aide précieuse.
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://servimg.com/image_preview.php?i=5&u=10054098
SOUS FIREFOX
http://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.
A voir également:
- Problèmes sous FireFox avec CSS
- Telecharger firefox - Télécharger - Navigateurs
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Exporter favoris firefox - Guide
- Ghostery firefox - Télécharger - Web & Internet
- Comment supprimer bing de firefox - Guide
6 réponses
Bonjour,
Cela tombe bien j'ai eu le même probléme sur mon site si cela peux vous aider, il faut chercher du côté des align="left" et les supprimer pour les remplacer par l'équivalent en feuille de style float:left;
Dans les feuille de style et pour les images qui sont décalées rajouter float:left;
A tester...
A+
Configuration: linux debian, virtualbox,winxp,ie07,firefox
Cela tombe bien j'ai eu le même probléme sur mon site si cela peux vous aider, il faut chercher du côté des align="left" et les supprimer pour les remplacer par l'équivalent en feuille de style float:left;
Dans les feuille de style et pour les images qui sont décalées rajouter float:left;
A tester...
A+
Configuration: linux debian, virtualbox,winxp,ie07,firefox
Bonjour,
Cela tombe bien j'ai eu le même probléme sur mon site si cela peux vous aider, il faut chercher du côté des align="left" et les supprimer pour les remplacer par l'équivalent en feuille de style float:left;
Donc dans les feuille de style et pour les images qui sont décalées mettre float:left;
A tester...
A+
Configuration: linux debian, virtualbox,winxp,ie07,firefox
Cela tombe bien j'ai eu le même probléme sur mon site si cela peux vous aider, il faut chercher du côté des align="left" et les supprimer pour les remplacer par l'équivalent en feuille de style float:left;
Donc dans les feuille de style et pour les images qui sont décalées mettre float:left;
A tester...
A+
Configuration: linux debian, virtualbox,winxp,ie07,firefox
Donc voilà je poste la soluce pour ceux qui auraient un problème... Il faut changer tous les attributs align="left" en float="left"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question