rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Problèmes sous FireFox avec CSS

Posté par Terraforgeur, le dimanche 30 décembre 2007 à 14:42:09
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.dt­d">
<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)=="P­NG") 
						{
						 img.outerHTML = 
							"<span "
							+(img.id?"id='"+img.id+"' ":"")
							+(img.className?"class='"+img.className+&qu­ot;' ":"")
							+(img.title?"title=\""+img.title+"­;\" ":"")
							+"style=\"width:"+img.width+"px;h­eight:"
							+img.height+"px;"
							+(img.align=="left"?"float:left;"­:(img.align=="right"
?"float:right;":""))
							+(img.parentElement.href?"cursor:hand;":&qu­ot;")
							+"display:inline-block;"+img.style.cssText+­";"
							+"filter:progid:DXImageTransform.Microsoft.Alpha­ImageLoader(src='"
							+img.src
							+"',sizingMethod='scale');\"></span&g­t;";
						}
					}
				}
				
</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
Répondre à Terraforgeur  Signaler ce message aux modérateurs Aller au dernier message

1


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
babou, le dimanche 30 décembre 2007 à 14:55:04
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
   
Répondre à babou

2


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
babou, le dimanche 30 décembre 2007 à 14:56:35
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
   
Répondre à babou

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Terraforgeur, le dimanche 30 décembre 2007 à 15:04:52
Merci beaucoup ca marche à merveille sous Fire Fox comme sur IE !!!
   
Répondre à Terraforgeur

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Terraforgeur, le dimanche 30 décembre 2007 à 15:10:27
Donc voilà je poste la soluce pour ceux qui auraient un problème... Il faut changer tous les attributs align="left" en float="left"
   
Répondre à Terraforgeur
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Firefox 3.0.1Firefox - Mozilla Firefox 3 est un excellent navigateur qui peut fonctionner à côté d' Internet Explorer ou le remplacer. Il...Catégorie: Navigateurs
Licence: Open Source
Télécharger Google Toolbar pour Firefox 3Google Toolbar pour Firefox - La barre d'outils Google permet : d'afficher le pagerank des pages visitées d'ajouter à vos favoris les pages que vous...Catégorie: Référencement
Licence: Freeware/gratuit
Télécharger Toutes les extensions (petits modules complémentaires) de Firefox ?Toutes les extensions (petits modules complémentaires) de Firefox - Au lieu d'énumérer toutes les extensions (petits modules complémentaires) de Fire fox , allez dans le menu outils de...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Problèmes sous FireFox avec CSS »